fix(AppShell): content min-height in auto height mode - #604
Closed
cixzhang wants to merge 1 commit into
Closed
Conversation
meta-cla
Bot
added
the
CLA Signed
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsAppShell · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
cixzhang
force-pushed
the
navi/fix/auto-height-scroll
branch
2 times, most recently
from
March 13, 2026 23:41
b8788c7 to
e8cffe6
Compare
In auto height mode, the content area should fill at least the remaining viewport height after the header. Adds min-height: calc(100dvh - header) to the content area via the existing --appshell-header-height CSS variable. The sidenav sticky behavior in auto mode was already implemented (position: sticky + height: calc(100vh - header)). This fix ensures the content area also respects the viewport minimum. Part of #565
cixzhang
force-pushed
the
navi/fix/auto-height-scroll
branch
from
March 14, 2026 02:46
e8cffe6 to
22c1228
Compare
Contributor
Author
|
Closing — the shell container already has |
cixzhang
added a commit
that referenced
this pull request
Mar 14, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
cixzhang
added a commit
that referenced
this pull request
Mar 14, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
cixzhang
added a commit
that referenced
this pull request
Mar 14, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
cixzhang
added a commit
that referenced
this pull request
Apr 26, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
cixzhang
added a commit
that referenced
this pull request
Jun 21, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
cixzhang
added a commit
that referenced
this pull request
Jun 21, 2026
Fix sidenav not filling height in auto mode and sticky elements being transparent when content scrolls underneath. - Sticky header and sidenav wrappers get opaque backgrounds based on the shell variant (not inherit — section variant has no intermediate background to inherit from) - Sidenav sticky wrapper uses display:flex + flexDirection:column so the panel fills the container - Panel gets flex:1 only in auto mode (via xstyle) to avoid breaking the row-based layout in fill mode - Use 100dvh instead of 100vh for sticky sidenav height - Remove duplicate role=navigation from LayoutPanel — XDSSideNav already provides the navigation landmark with aria-label Fixes #604 Part of #565
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.
In auto height mode, the content area should fill at least the remaining viewport after the header. Currently short content leaves empty space below.
Adds
minHeight: calc(100dvh - var(--appshell-header-height, 0px))to the content area in auto mode, using the existing CSS variable that's already measured via ResizeObserver.The sidenav sticky behavior in auto mode was already implemented. This ensures the content side also fills correctly.
Part of #565