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 9dce1e45f3b3cb97ad4e1f57a56535e6ada03eda..b91e836b39abf77199eaeffbca21c7658fc9eb0e 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 8e551ed789cd735518770fcd5fdde243885bfb61..187b9a0349bb595558488b48f3fa0ecd7aec3e88 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;
@@ -117,6 +126,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 0396c62de19ed0981df361f19ae5396bc09133a8..ff4bed521f0db69f9ea40dcfc428e2367e5e4101 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';
@@ -53,7 +54,8 @@ formgroup: CdFormGroup;
   selector: 'cd-tearsheet',
   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;