mgr/dashboard: Footer actions shift upward instead of staying pinned at modal bottom...

Fixes: https://tracker.ceph.com/issues/75409
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 40e4afd55a18784e9e7dd9890c7593b1d4641e23..b43d878f8cc7c682c9263d0fb2d42e9ccca87241 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
@@ -60,7 +60,7 @@
            class="form-item">
         <h1
           class="cds--type-heading-compact-01"
-          i18n>Add host manually</h1>
+          i18n>Add hosts</h1>
         <label class="cds--label"
                for="hostname">
           <span i18n>Host name</span>
@@ -125,7 +125,7 @@
     i18n>Added hosts ({{addedHostsLength}})</h1>
   <p
     i18n
-    class="cds--type-body-01 cd-nvmeof-subsystem-step-two-added-hosts-text">No hosts added yet. Add hosts manually or upload a CSV file.</p>
+    class="cds--type-body-01 cd-nvmeof-subsystem-step-two-added-hosts-text">No hosts added yet.</p>
   } @else {
   <cds-contained-list
     label="Added hosts ({{addedHostsLength}})"

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 dd4fed0fb39311803174946016cf2bdb2cff47cb..3b3fa98099de0de981fcd9e49b93fe0ae6087920 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
@@ -1,7 +1,7 @@
 // WIDE TEARSHEET
-// No css variable to apply css to modal div hence using css ngdeep
+// No css variable to apply css to modal div.
 // This is needed to set the width of tearsheet as per carbon standards.
-:host ::ng-deep .cds--modal-container.cds--modal-container--lg {
+.cds--modal-container.cds--modal-container--lg {
   position: fixed;
 
   // 88px from top
@@ -20,7 +20,16 @@
   flex-direction: column;
 }
 
-:host ::ng-deep .cds--modal-container.cds--modal-container--sm {
+// Global Carbon override sets .cds--modal-scroll-content to max-height: 70vh.
+// For tearsheets this causes content area to shrink and footer to float up.
+.cds--modal-container.cds--modal-container--lg .cds--modal-scroll-content {
+  max-height: none;
+  height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.cds--modal-container.cds--modal-container--sm {
   inset-block-start: 88px;
   block-size: 50vh;
   max-block-size: 50vh;
@@ -111,6 +120,14 @@
   }
 }
 
+// In steps without right influencer (e.g. Subsystem details / Authentication),
+// make content fill the available modal height so footer stays pinned.
+.tearsheet-main > .tearsheet-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-block-size: none;
+}
+
 //FOOTER
 .tearsheet-footer {
   border-top: 1px solid var(--cds-border-subtle);

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts
index 99fdbfa1f200050e45ad770dc35fcf36e66c5392..4aa5bc3393450c053fa12ef7e829f7c514735866 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.ts
@@ -10,7 +10,8 @@ import {
   DestroyRef,
   OnDestroy,
   ChangeDetectionStrategy,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Step } from 'carbon-components-angular';
@@ -54,7 +55,8 @@ formgroup: CdFormGroup;
   standalone: false,
   templateUrl: './tearsheet.component.html',
   styleUrls: ['./tearsheet.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class TearsheetComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() title!: string;