From c513123f9c06d448f237c2e67c5950ef700f774c Mon Sep 17 00:00:00 2001
From: Paul Friederichsen <floogulinc@gmail.com>
Date: Mon, 17 Jun 2024 10:13:24 -0500
Subject: [PATCH] Fix up siblings and parents dialog

---
 .../file-info-sheet.component.scss            | 15 --------
 ...tag-siblings-parents-dialog.component.html | 36 ++++++++++---------
 src/styles.scss                               | 14 ++++++++
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/app/file-info-sheet/file-info-sheet.component.scss b/src/app/file-info-sheet/file-info-sheet.component.scss
index 2f2a03b..bba2aaa 100644
--- a/src/app/file-info-sheet/file-info-sheet.component.scss
+++ b/src/app/file-info-sheet/file-info-sheet.component.scss
@@ -79,18 +79,3 @@
 .known-url-list-item-title {
   text-decoration: none;
 }
-
-.tag-chip-list {
-  .tag-chip {
-    // restore old text wrapping behavior
-    padding-block: calc((var(--mdc-chip-container-height) - max(var(--mdc-chip-with-avatar-avatar-size), var(--mdc-chip-label-text-line-height))) / 2);
-    height: 100%;
-  }
-
-  .tag-chip-text {
-    white-space: wrap;
-    overflow-wrap: anywhere;
-  }
-}
-
-
diff --git a/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.html b/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.html
index c395369..fea1f8a 100644
--- a/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.html
+++ b/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Siblings and Parents for "{{data.tag}}"</h1>
+<h1 mat-dialog-title>Siblings and Parents</h1>
 <div mat-dialog-content>
 
   @if (siblingsAndParents$ | async; as siblingsAndParents) {
@@ -7,24 +7,28 @@ <h1 mat-dialog-title>Siblings and Parents for "{{data.tag}}"</h1>
         @for (service of siblingsAndParents | orderBy: 'serviceName' | orderBy: '-serviceType'; track service.serviceKey) {
           <mat-tab [label]="service.serviceName">
             <ng-template matTabContent>
-              <p>
-                Ideal tag:
-                <mat-chip-row
-                  class="theming tag-chip tag-color"
-                  [attr.data-tag-namespace]="service.ideal_tag| tagNamespace"
-                  [matMenuTriggerFor]="tagMenu"
-                  [matMenuTriggerData]="{tag: service.ideal_tag}"
-                  >
-                  <div class="tag-chip-text">{{service.ideal_tag}}</div>
-                </mat-chip-row>
-              </p>
               <mat-accordion multi>
-                <mat-expansion-panel >
+                <mat-expansion-panel expanded>
+                  <mat-expansion-panel-header>
+                    Ideal
+                  </mat-expansion-panel-header>
+                  <mat-chip-listbox class="mat-mdc-chip-set-stacked tag-chip-list" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
+                    <mat-chip-option
+                      class="theming tag-chip tag-color"
+                      [attr.data-tag-namespace]="service.ideal_tag| tagNamespace"
+                      [matMenuTriggerFor]="tagMenu"
+                      [matMenuTriggerData]="{tag: service.ideal_tag}"
+                      >
+                      <div class="tag-chip-text">{{service.ideal_tag}}</div>
+                    </mat-chip-option>
+                  </mat-chip-listbox>
+                </mat-expansion-panel>
+                <mat-expansion-panel>
                   <mat-expansion-panel-header>
                     Siblings ({{service.siblings.length}})
                   </mat-expansion-panel-header>
                   <ng-template matExpansionPanelContent>
-                    <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
+                    <mat-chip-listbox class="mat-mdc-chip-set-stacked tag-chip-list" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
                       @for (tag of (service.siblings | orderBy); track tag) {
                         <mat-chip-option
                           class="theming tag-chip tag-color"
@@ -43,7 +47,7 @@ <h1 mat-dialog-title>Siblings and Parents for "{{data.tag}}"</h1>
                     Ancestors ({{service.ancestors.length}})
                   </mat-expansion-panel-header>
                   <ng-template matExpansionPanelContent>
-                    <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
+                    <mat-chip-listbox class="mat-mdc-chip-set-stacked tag-chip-list" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
                       @for (tag of (service.ancestors | orderBy); track tag) {
                         <mat-chip-option
                           class="theming tag-chip tag-color"
@@ -62,7 +66,7 @@ <h1 mat-dialog-title>Siblings and Parents for "{{data.tag}}"</h1>
                     Descendants ({{service.descendants.length}})
                   </mat-expansion-panel-header>
                   <ng-template matExpansionPanelContent>
-                    <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
+                    <mat-chip-listbox class="mat-mdc-chip-set-stacked tag-chip-list" aria-orientation="vertical" aria-label="File tags" [selectable]="false">
                       @for (tag of (service.descendants | orderBy); track tag) {
                         <mat-chip-option
                           class="theming tag-chip tag-color"
diff --git a/src/styles.scss b/src/styles.scss
index 3a0ffb0..0852a0b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -400,6 +400,20 @@ mat-icon.mat-mdc-card-avatar {
   text-overflow: ellipsis;
 }
 
+.tag-chip-list {
+  .tag-chip {
+    // restore old text wrapping behavior
+    padding-block: calc((var(--mdc-chip-container-height) - max(var(--mdc-chip-with-avatar-avatar-size), var(--mdc-chip-label-text-line-height))) / 2);
+    height: 100%;
+  }
+
+  .tag-chip-text {
+    white-space: wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
+
 
 .flex-row {
   display: flex;