From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Fri, 17 Apr 2026 09:45:36 +0000 (+0530)
Subject: mgr/dashboard: tearsheet-layout-fix
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=e777a22a1841f7156dc111d46a3e1f99323a64d4;p=ceph.git

mgr/dashboard: tearsheet-layout-fix

Fixes: https://tracker.ceph.com/issues/76084

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
index b43d878f8cc7..b979d1c0fd51 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
@@ -6,7 +6,7 @@
        [narrow]="true"
        [fullWidth]="true">
     <div cdsCol
-         [columnNumbers]="{lg: 10}"
+         [columnNumbers]="{sm: 4, md: 8, lg: 16}"
          class="cd-nvmeof-subsystem-step-two">
       <div cdsRow
            class="form-item cds-mb-0">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
index 9cf1e5193146..36fe955b7e9f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
@@ -1,4 +1,9 @@
 .cd-nvmeof-subsystem-step-two {
+  // Full width of the tearsheet content column; min-inline-size allows nested
+  // Carbon grid rows to shrink instead of bleeding into the right influencer.
+  min-inline-size: 0;
+  inline-size: 100%;
+
   &-manual-hosts {
     display: flex;
     align-items: flex-start;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
index b331215840d9..a6ff590043fa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
@@ -18,6 +18,12 @@
   max-inline-size: none;
   display: flex;
   flex-direction: column;
+
+  // Keep header from shrinking; body row must be allowed to shrink below content height
+  // so inner .tearsheet-content can scroll (default min-height: auto prevents this).
+  > .tearsheet-header {
+    flex-shrink: 0;
+  }
 }
 
 // Global Carbon override sets .cds--modal-scroll-content to max-height: 70vh.
@@ -75,29 +81,62 @@
 
 // BODY
 .tearsheet-body {
-  padding-block: 0;
-  padding-inline: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
   height: 100%;
 }
 
+// Wide tearsheet: body is a flex child of .cds--modal-container--lg; must shrink so
+// .tearsheet-content scrolls and the footer stays in view on tall steps (e.g. Review).
+.cds--modal-container.cds--modal-container--lg > .tearsheet-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-block-size: 0;
+  height: auto;
+}
+
 .tearsheet-left-influencer {
   background-color: var(--cds-background);
   padding: var(--cds-spacing-06) var(--cds-spacing-07);
   overflow-block: auto;
   overflow-y: auto;
   margin: 0;
+  min-height: 0;
+  min-block-size: 0;
 }
 
 .tearsheet-right-influencer {
   background-color: var(--cds-background);
   padding: var(--cds-spacing-05) var(--cds-spacing-05);
+  border-inline-start: 1px solid var(--cds-border-subtle-01);
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+// Two-column body (main content + right influencer): bound the inner grid so
+// nested form rows and dividers stay in the left column (host access step).
+.tearsheet-main > .cds--css-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-block-size: 0;
+  inline-size: 100%;
+}
+
+.tearsheet-main > .cds--css-grid > .tearsheet-content {
+  min-width: 0;
+  min-inline-size: 0;
+  min-height: 0;
+  min-block-size: 0;
+  max-block-size: none;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .tearsheet-main {
   margin: 0;
   height: 100%;
+  min-height: 0;
+  min-block-size: 0;
   display: flex;
   flex-direction: column;
 
@@ -129,6 +168,7 @@
 //FOOTER
 .tearsheet-footer {
   background-color: var(--cds-layer-01);
+  flex-shrink: 0;
 
   &-submit {
     display: flex;