fix(board): give AppShell root a viewport-height floor (#6736)
* fix(board): give AppShell root a viewport-height floor when a background is set The board canvas sizes itself to its content, and AppShell runs in 'static' mode so <main> doesn't force a 100dvh minimum either. That means a board's background image only covers as much height as the content needs - collapsing a container (or any board with short content) leaves flat page background showing below it instead of the background continuing to the bottom of the viewport, looking like a big empty void. Root-caused via a local repro: the grid/reflow system was already shrinking the collapsed container's own space correctly (verified the live-measured canvas height matched exactly, not the stale debug attribute) - the void was purely a background-sizing issue on the AppShell root, unrelated to the collapse/layout logic itself. * docs(boards): document background minimum-height behavior
This commit is contained in:
1 parent
aa179f1ec0
commit
7855278ed1
2 files changed
+8
No files matched your search
@@ -273,6 +273,8 @@ Expanding it smoothly restores those bounds and moves following items out of the
|
||||
|
||||
### Background
|
||||
|
||||
When a background image is set, it always covers at least the full browser window height, even if the board's content is shorter (for example when a Container is collapsed).
|
||||
|
||||
#### Background image URL
|
||||
|
||||
Homarr can display a background image behind apps and widgets.
|
||||
|
||||
@@ -27,6 +27,12 @@ export const ClientShell = ({
|
||||
return (
|
||||
<AppShell
|
||||
{...backgroundProps}
|
||||
// The board canvas sizes itself to its content (AppShell runs in "static" mode so
|
||||
// <main> doesn't force a 100dvh minimum - see AppShell.css). Without this, a board
|
||||
// background image only covers as much height as the content needs, so collapsing a
|
||||
// container short enough leaves flat page background showing below it instead of the
|
||||
// background continuing to the bottom of the viewport.
|
||||
mih={backgroundProps.bg ? "100dvh" : undefined}
|
||||
header={hasHeader ? { height: headerHeight } : undefined}
|
||||
navbar={
|
||||
hasNavigation
|
||||
|
||||
Reference in new issue
Block a user