fix(board): fix container void/overflow gap across scrollable and collapse states (#6750)

A container's outer grid cell and its own inner content grid are sized by
two independent calculations that only agree when the container is
scrollable and expanded. When collapsed, or when non-scrollable content
needs more rows than declared, the inner grid keeps rendering at its old/
content-driven size while the outer cell shrinks or stays fixed, leaving
an invisible-but-space-occupying box that inflates the board's scroll
height into a visible empty gap below the container.

Pass the outer instance's collapsed row count down as a
viewportRowCountOverride so the inner grid matches it exactly when
collapsed, and grow the outer placement's height to the already-computed
content minimum (getContainerMinimumSizes) for non-scrollable containers
so it stays in sync with the inner grid's own growth.
This commit is contained in:
Bergasha authored and GitHub committed 2026-08-31 15:51:17 +10:00
1 parent 5e23659d99
commit feea3512d0
2 files changed
+17 -10

No files matched your search

@@ -8,6 +8,7 @@ import { useEditMode } from "@homarr/boards/edit-mode";
import { useI18n } from "@homarr/translation/client";
import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
import { COLLAPSED_SECTION_ROW_COUNT } from "~/components/board/layout";
import { SectionGrid } from "./grid/section-grid";
import { useSectionCollapse } from "./section-collapse";
import { useOpenSectionApps } from "./use-open-section-apps";
@@ -149,7 +150,13 @@ export const BoardContainerSection = ({ section }: Props) => {
aria-hidden={isVisuallyCollapsed}
inert={isVisuallyCollapsed}
>
<SectionGrid section={section} columnCount={section.width} requestedRowCount={section.height} label={label} />
<SectionGrid
section={section}
columnCount={section.width}
requestedRowCount={section.height}
viewportRowCountOverride={isVisuallyCollapsed ? COLLAPSED_SECTION_ROW_COUNT : undefined}
label={label}
/>
</Box>
</Card>
{isEditMode && <BoardContainerMenu section={section} />}