From 297e2f7c4abcebf681da8ab6e8d14ee5e4ddd1b1 Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Thu, 11 Dec 2025 11:48:32 +0530
Subject: [PATCH] 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>
---
 .../details-card/details-card.component.html  | 16 ++++---------
 .../details-card/details-card.component.scss  | 10 ++++----
 .../side-panel/side-panel.component.html      | 12 ++++------
 .../side-panel/side-panel.component.scss      | 23 +++++++++++--------
 4 files changed, 28 insertions(+), 33 deletions(-)

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 9a402f60c59..cdaf853f616 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 5d896839cd4..055dcbd790f 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 3d5ea03cd1d..293f446a13b 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 a616b172ef4..802436d2fab 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;
   }
 }
-- 
2.47.3