From: Nizamudeen A <nia@redhat.com>
Date: Thu, 11 Dec 2025 06:18:32 +0000 (+0530)
Subject: mgr/dashboard: fix details card and sidebar component styles
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=297e2f7c4abcebf681da8ab6e8d14ee5e4ddd1b1;p=ceph.git

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 9a402f60c593..cdaf853f616a 100644
--- 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 5d896839cd4a..055dcbd790f9 100644
--- 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 3d5ea03cd1dd..293f446a13bd 100644
--- 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 a616b172ef43..802436d2fab7 100644
--- 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;
   }
 }