mgr/dashboard: fix details card and sidebar component styles

- add the correct header sizes for both components
- remove unnecessary div nesting
- detail card was using cdsRow directive but that messes with the
  alignment since micro components shouldn't use the 2xgrid structure.
Instead it needs to rely on stacks or css grids. So adding 3 grid
structure that matches with the design and eliminating any css
customizations.

Fixes: https://tracker.ceph.com/issues/74184
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
index 9a402f60c5934170914c8654f2abe286aa98e486..cdaf853f616ad1866e948e927609e070a398b9a9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
@@ -1,14 +1,8 @@
-<cds-tile>
 @if (cardTitle) {
-  <div class="details-card-header">
-    <span class="cds--type-heading-03"
-          i18n>{{ cardTitle }}</span>
-  </div>
+  <span class="details-card-header cds--type-heading-compact-02"
+        i18n>{{ cardTitle }}</span>
 }
 
-  <div class="details-card-body">
-    <div cdsRow>
-      <ng-content select=".details-body-content"></ng-content>
-    </div>
-  </div>
-</cds-tile>
+<div class="details-card-body">
+  <ng-content select=".details-body-content"></ng-content>
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss
index 5d896839cd4a441097e73ab9dc539fbb6d25798a..055dcbd790f96570a1fc3f50758c9536580ec216 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss
@@ -8,10 +8,8 @@
   position: relative;
 }
 
-::ng-deep .cds--label {
-  display: block;
-}
-
-.cds--row {
-  row-gap: layout.$spacing-05;
+.details-card-body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-07;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
index 3d5ea03cd1dda26a3f740c72cbc3864f25142c7d..293f446a13bdd79f91381ce3a8c786da4a75d217 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
@@ -4,18 +4,16 @@
 
 <cds-panel [expanded]="expanded"
            [attr.panel-size]="size">
-  <div>
+  <ng-container *ngIf="headerText">
+    <span class="panel-header cds--type-heading-03">{{ headerText }}</span>
     <cds-icon-button kind="ghost"
-                     class="float-end"
+                     class="close-btn"
                      title="Close"
                      (click)="close()">
       <svg cdsIcon="close"></svg>
     </cds-icon-button>
-    <div class="panel-header"
-         *ngIf="headerText">
-    {{ headerText }}
-    </div>
-  </div>
+  </ng-container>
+
   <ng-content select=".panel-content"></ng-content>
   <ng-content select=".panel-footer"></ng-content>
 </cds-panel>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
index a616b172ef43546fcefddf25f18f432bcba0bc78..802436d2fab7bfdd57690ccdd7a0ba010dab306d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
@@ -1,8 +1,13 @@
-@use './src/styles/vendor/variables' as vv;
+@use '../../../../styles/vendor/variables' as vv;
 @use '@carbon/layout';
 @use '@carbon/styles/scss/theme';
 
 :host ::ng-deep cds-panel {
+  .cds--header-panel--expanded {
+    display: flex;
+    flex-direction: column;
+  }
+
   &[panel-size='sm'] .cds--header-panel--expanded {
     inline-size: 20rem;
   }
@@ -23,19 +28,18 @@
     inline-size: 80rem;
   }
 
-  .cds--header-panel--expanded {
-    background-color: vv.$white;
-    max-inline-size: 100%;
-    overflow: hidden;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
+  .panel-header {
+    flex-direction: row;
+    margin: layout.$spacing-04;
   }
 
-  .panel-header {
-    padding: layout.$spacing-04 layout.$spacing-04 0 layout.$spacing-04;
+  .close-btn {
+    position: absolute;
+    right: 0;
   }
 
   .panel-content {
+    flex: 1;
     overflow: auto;
     padding: 0 layout.$spacing-04 0 layout.$spacing-04;
   }
@@ -43,6 +47,7 @@
   .panel-footer {
     display: flex;
     justify-content: flex-end;
+    width: 100% ;
     border-top: 1px solid theme.$border-subtle-02;
   }
 }