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 b43d878f8cc7c682c9263d0fb2d42e9ccca87241..b979d1c0fd5197dabd68004829986264367c9107 100644 (file)
--- 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 9cf1e5193146094471731860b29ff27ba7a5fee3..36fe955b7e9f1d605ac825067603e95d69319ec6 100644 (file)
--- 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 b331215840d94e35d02cab88bed048e16793bfea..a6ff590043fa561dc2f2a36a7b2565d18a0fd07e 100644 (file)
--- 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;