AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve popup layout and scrolling behavior

Browse Source 
Updated `CreateEnvelopeWizardPopup.razor` to enforce consistent popup dimensions by setting height properties to `85vh` and disabling scrolling.

Enhanced `sender-page.css` with new classes to manage flexible layouts and scrolling behavior for the wizard's stepper and step content. Removed fixed height and scrolling constraints from `.sender-create-wizard__receiver-existing-list` for better layout flexibility.

These changes improve the user experience by ensuring consistent dimensions, reducing unnecessary scrolling, and maintaining a structured layout.
This commit is contained in:
tekh
2026-11-11 23:50:45 +01:00
parent 94658b0d9b
commit 89a4e789f1
2 changed files with 79 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
View File

@@ -17,6 +17,10 @@
HeaderText="@L("SenderWizard_Header", "Neuen Umschlag erstellen")"
Width="90vw"
MaxWidth="90vw"
Height="85vh"
MinHeight="85vh"
MaxHeight="85vh"
Scrollable="false"
ShowFooter="true"
CloseOnOutsideClick="false"
ShowCloseButton="true"

82
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
View File

@@ -1108,13 +1108,85 @@
grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
gap: 0.85rem;
align-items: stretch;
min-height: min(66vh, 620px);
transition: grid-template-columns 220ms ease 0.2s, gap 220ms ease 0.2s;
}
.sender-create-wizard-popup.dxbl-modal-root,
.sender-create-wizard-popup .dxbl-modal-root,
.sender-create-wizard-popup .dxbl-modal,
.sender-create-wizard-popup .dxbl-modal-dialog,
.sender-create-wizard-popup .dxbl-modal-content,
.sender-create-wizard-popup .dxbl-popup,
.sender-create-wizard-popup.dxbl-popup {
height: 85vh !important;
max-height: 85vh !important;
display: flex !important;
flex-direction: column !important;
}
.sender-create-wizard-popup .dxbl-modal-body,
.sender-create-wizard-popup .dxbl-popup-content {
max-height: min(78vh, 760px);
overflow: auto;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.sender-create-wizard-popup .dxbl-popup-content > .sender-create-wizard,
.sender-create-wizard-popup .sender-create-wizard,
.sender-create-wizard-popup .sender-create-wizard__body-layout {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Scroll only inside the stepper content, so the body never resizes. */
.sender-create-wizard__stepper-shell {
min-height: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.sender-create-wizard__stepper {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
/* MudStepper internal wrappers must pass height down without scrolling. */
.sender-create-wizard__stepper .mud-stepper-content,
.sender-create-wizard__stepper .mud-stepper-nav-content,
.sender-create-wizard__stepper .mud-stepper-content-wrapper {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.sender-create-wizard__step-content,
.sender-create-wizard__step-layout {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* The actual scroll area for every step, mirroring the receiver list behavior. */
.sender-create-wizard__step-main {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-gutter: stable;
padding-right: 0.2rem;
}
.sender-create-wizard-popup .dxbl-popup-footer {
@@ -1543,10 +1615,6 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: min(24vh, 220px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
padding-right: 0.2rem;
}