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:
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} />}
|
||||
|
||||
Reference in new issue
Block a user