fix(web): single grid row spacing (#30277)

This commit is contained in:
Jason Rasmussen 2026-07-27 10:13:11 -04:00 committed by GitHub
parent e3385ce183
commit bc6bf388c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -10,16 +10,11 @@
let container: HTMLElement | undefined = $state(); let container: HTMLElement | undefined = $state();
let contentRect: DOMRectReadOnly | undefined = $state(); let contentRect: DOMRectReadOnly | undefined = $state();
const getGridGap = (element: Element) => { const getColumnGap = (element: Element) => {
const style = getComputedStyle(element); const style = getComputedStyle(element);
return Number.parseInt(style.columnGap) || 0;
return {
columnGap: parsePixels(style.columnGap),
};
}; };
const parsePixels = (style: string) => Math.trunc(Number(style)) || 0;
const getItemCount = (container: HTMLElement, containerWidth: number) => { const getItemCount = (container: HTMLElement, containerWidth: number) => {
if (!container.firstElementChild) { if (!container.firstElementChild) {
return 1; return 1;
@ -27,7 +22,7 @@
const childContentRect = container.firstElementChild.getBoundingClientRect(); const childContentRect = container.firstElementChild.getBoundingClientRect();
const childWidth = Math.floor(childContentRect.width || Infinity); const childWidth = Math.floor(childContentRect.width || Infinity);
const { columnGap } = getGridGap(container); const columnGap = getColumnGap(container);
return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1; return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1;
}; };