fix(ui): import wizard scroll and viewport containment#33
Merged
Conversation
All three wizard steps now use flex-col layout with maxHeight calc(80vh - 48px). Step headers and footer buttons are flex-shrink-0 (always visible). Content area is flex-1 min-h-0 with overflow-y-auto, hidden scrollbar, gradient fade, and circular down-arrow indicator. Co-authored-by: Copilot <[email protected]>
Desktop modal panel now has maxHeight: 90vh and flex-col layout so content can't overflow the viewport. Import wizard steps use flex-1 min-h-0 to fill and scroll within the modal's constraint instead of hardcoded calc(80vh - 48px) which didn't work without a constrained parent. Co-authored-by: Copilot <[email protected]>
Revert flex-based approach that didn't work — h-full can't resolve through maxHeight + flex chain. Use the same proven pattern as the BudgetTemplateModal template tab: outer div.relative + inner div both with maxHeight: 60vh, inner has overflow-y-auto + hide-scrollbar. Revert ResponsiveModal flex/maxHeight changes. Co-authored-by: Copilot <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the Import from Template wizard overflowing the modal and running off the page. Adds scroll containment with gradient fade and down-arrow indicator to all three wizard steps.
Changes
maxHeight: 60vhwithoverflow-y-auto+ hidden scrollbar, gradient fade overlay, and circular down-arrow scroll indicatorPattern
Uses the same proven approach as the Budget Template modal's Template tab: direct
maxHeighton both the outerdiv.relative(for gradient positioning) and the inner scrollablediv— no flex chain orh-fulldependency.Files Changed
packages/client/src/pages/BudgetPage.tsx— scroll containers + indicator for all 3 wizard steps