From 7855278ed19fdfa2a7feab55df6291d22ce61751 Mon Sep 17 00:00:00 2001 From: Bergasha Date: Sat, 29 Aug 2026 09:26:15 +1000 Subject: [PATCH] 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
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 --- apps/docs/docs/management/boards/index.mdx | 2 ++ apps/nextjs/src/components/layout/shell.tsx | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx index 5c3a20c9f..89f061f1e 100644 --- a/apps/docs/docs/management/boards/index.mdx +++ b/apps/docs/docs/management/boards/index.mdx @@ -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. diff --git a/apps/nextjs/src/components/layout/shell.tsx b/apps/nextjs/src/components/layout/shell.tsx index 558ba0c69..bf86ca341 100644 --- a/apps/nextjs/src/components/layout/shell.tsx +++ b/apps/nextjs/src/components/layout/shell.tsx @@ -27,6 +27,12 @@ export const ClientShell = ({ return ( 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