Fix up siblings dialog

floogulinc · Jun 19, 2024 · 9aa312f · 9aa312f
1 parent e12bc4d
commit 9aa312f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
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
@@ -1,21 +1,20 @@
 <h1 mat-dialog-title>Siblings and Parents</h1>
 <div mat-dialog-content>
-
   @if (siblingsAndParents$ | async; as siblingsAndParents) {
-    <div>
-      <mat-tab-group animationDuration="0ms" dynamicHeight>
-        @for (service of siblingsAndParents | orderBy: 'serviceName' | orderBy: '-serviceType'; track service.serviceKey) {
-          <mat-tab [label]="service.serviceName">
-            <ng-template matTabContent>
+    <mat-tab-group animationDuration="0ms" dynamicHeight>
+      @for (service of siblingsAndParents | orderBy: 'serviceName' | orderBy: '-serviceType'; track service.serviceKey) {
+        <mat-tab [label]="service.serviceName">
+          <ng-template matTabContent>
+            <div class="tag-accordion-wrapper">
               <mat-accordion multi>
-                <mat-expansion-panel expanded>
+                <mat-expansion-panel>
                   <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"
+                      [attr.data-tag-namespace]="service.ideal_tag | tagNamespace"
                       [matMenuTriggerFor]="tagMenu"
                       [matMenuTriggerData]="{tag: service.ideal_tag}"
                       >
@@ -81,11 +80,11 @@ <h1 mat-dialog-title>Siblings and Parents</h1>
                   </ng-template>
                 </mat-expansion-panel>
               </mat-accordion>
-            </ng-template>
-          </mat-tab>
-        }
-      </mat-tab-group>
-    </div>
+            </div>
+          </ng-template>
+        </mat-tab>
+      }
+    </mat-tab-group>
   } @else {
     <mat-spinner></mat-spinner>
   }

diff --git a/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.scss b/src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.scss
@@ -0,0 +1,4 @@
+.tag-accordion-wrapper {
+  margin-top: 8px;
+  padding: 4px;
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -302,9 +302,13 @@ mat-icon.mat-mdc-card-avatar {
 }
 
 
-:root {
+.theming {
   // restores old behavior that was set on each dialog container element
   --mat-dialog-container-max-width: 80vw;
+
+  // set dialog container to same as bottom sheet container
+  --mdc-dialog-container-color: var(--sys-surface-container-low);
+  //--mat-bottom-sheet-container-background-color: var(--sys-surface-container-low);
 }
 
 // --------------------------------------------------------------------------------