Bergasha
7855278ed1
* 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
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { PropsWithChildren } from "react";
|
|
import { AppShell } from "@mantine/core";
|
|
import { useAtomValue } from "jotai";
|
|
import { useSettings } from "@homarr/settings";
|
|
|
|
import { useOptionalBackgroundProps } from "./background";
|
|
import { appShellHeaderHeight } from "./constants";
|
|
import { navigationCollapsedAtom } from "./header/burger";
|
|
|
|
interface ClientShellProps {
|
|
hasHeader?: boolean;
|
|
hasNavigation?: boolean;
|
|
}
|
|
|
|
export const ClientShell = ({
|
|
hasHeader = true,
|
|
hasNavigation = true,
|
|
children,
|
|
}: PropsWithChildren<ClientShellProps>) => {
|
|
const collapsed = useAtomValue(navigationCollapsedAtom);
|
|
const backgroundProps = useOptionalBackgroundProps();
|
|
const { headerPreferences } = useSettings();
|
|
const headerHeight = headerPreferences.visible ? appShellHeaderHeight : 0;
|
|
|
|
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
|
|
? {
|
|
width: 300,
|
|
breakpoint: "sm",
|
|
collapsed: { mobile: collapsed },
|
|
}
|
|
: undefined
|
|
}
|
|
padding="md"
|
|
>
|
|
{children}
|
|
</AppShell>
|
|
);
|
|
};
|