administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-05 22:57:40 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #52 from ibs0d/claude/fix-grid-layout-height-p9ZWo

Browse Source 
Claude/fix grid layout height p9 z wo
This commit is contained in:
ibs0d 2026-03-16 14:43:56 +11:00 committed by GitHub
commit 8a3eaff22f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/views/live/DraggableGridLayout.tsx
View File

@ -28,7 +28,7 @@ import {
VolumeState, VolumeState,
} from "@/types/live"; } from "@/types/live";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useResizeObserver } from "@/hooks/resize-observer";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import useSWR from "swr"; import useSWR from "swr";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
@ -329,8 +329,24 @@ export default function DraggableGridLayout({
const gridContainerRef = useRef<HTMLDivElement>(null); const gridContainerRef = useRef<HTMLDivElement>(null);
const [{ width: containerWidth, height: containerHeight }] = const [containerWidth, setContainerWidth] = useState(0);
useResizeObserver(gridContainerRef); const [containerHeight, setContainerHeight] = useState(0);
// useLayoutEffect reads ref.current after commit (refs are set before layout
// effects run), so this reliably fires before the first paint regardless of
// whether SWR triggers subsequent re-renders or not.
useLayoutEffect(() => {
const el = gridContainerRef.current;
if (!el) return;
setContainerWidth(el.clientWidth);
setContainerHeight(el.clientHeight);
const ro = new ResizeObserver(([entry]) => {
setContainerWidth(entry.contentRect.width);
setContainerHeight(entry.contentRect.height);
});
ro.observe(el);
return () => ro.disconnect();
}, []);
const scrollBarWidth = useMemo(() => { const scrollBarWidth = useMemo(() => {
if (containerWidth && containerHeight && containerRef.current) { if (containerWidth && containerHeight && containerRef.current) {
@ -359,7 +375,7 @@ export default function DraggableGridLayout({
// subtract container margin, 1 camera takes up at least 4 rows // subtract container margin, 1 camera takes up at least 4 rows
// account for additional margin on bottom of each row // account for additional margin on bottom of each row
return ( return (
((availableWidth ?? window.innerWidth) - 2 * marginValue) / (availableWidth - 2 * marginValue) /
12 / 12 /
aspectRatio - aspectRatio -
marginValue + marginValue +
@ -710,9 +726,9 @@ export default function DraggableGridLayout({
currentGroups={groups} currentGroups={groups}
activeGroup={group} activeGroup={group}
/> />
<Responsive {containerWidth > 0 && <Responsive
className="grid-layout" className="grid-layout"
width={availableWidth ?? window.innerWidth} width={availableWidth}
layouts={{ layouts={{
lg: currentGridLayout, lg: currentGridLayout,
md: currentGridLayout, md: currentGridLayout,
@ -887,7 +903,7 @@ export default function DraggableGridLayout({
</GridLiveContextMenu> </GridLiveContextMenu>
); );
})} })}
</Responsive> </Responsive>}
{isDesktop && ( {isDesktop && (
<div <div
className={cn( className={cn(