responsive grid clean up

Giphy · Jan 27, 2025 · 6066b1c · 6066b1c
1 parent cf150ce
commit 6066b1c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 46 deletions.
diff --git a/packages/react-components/src/components/grid.tsx b/packages/react-components/src/components/grid.tsx
@@ -169,16 +169,15 @@ class Grid extends PureComponent<Props, State> {
         const showLoader = !isDoneFetching
         const isFirstLoad = gifs.length === 0
         const gutterOffset = (gutter * (columns - 1)) / columns
-        const gifPercentWidth = percentWidth ? `calc(${(gifWidth / width) * 100}% + ${gutterOffset}px)` : undefined
-        let itemWidth: number | undefined
-        if (!gifPercentWidth) {
-            const gutterOffset2 = gutter * (columns - 1)
-            itemWidth = Math.floor((width - gutterOffset2) / columns)
+        let columnWidth: string = `${Math.floor((width - gutter * (columns - 1)) / columns)}px`
+        if (percentWidth) {
+            columnWidth = `calc(${(gifWidth / width) * 100}% + ${gutterOffset}px)`
         }
         // put gifs into their columns
         const sorter: [IGif[]][] = []
         const columnHeights: number[] = fillArray(columns, columnOffsets)
         gifs.forEach((gif) => {
+            // get the shortest column
             const columnTarget = columnHeights.indexOf(Math.min(...columnHeights))
             const [existingGifs = []] = sorter[columnTarget] || []
             sorter[columnTarget] = [[...existingGifs, gif]]
@@ -191,48 +190,45 @@ class Grid extends PureComponent<Props, State> {
         }
         return (
             <PingbackContextManager attributes={{ layout_type: layoutType }}>
-                <div className={className} style={{ width: percentWidth || width }}>
+                <div className={className}>
                     <div style={containerStyle}>
-                        {(sorter || []).map(([_gifs], columnIndex) => {
-                            return (
-                                <div
-                                    key={columnIndex}
-                                    style={{
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: gutter,
-                                        width: gifPercentWidth || itemWidth,
-                                    }}
-                                >
-                                    {(_gifs || []).map((gif) => {
-                                        return (
-                                            <Gif
-                                                style={{
-                                                    aspectRatio: gif.images.original.width / gif.images.original.height,
-                                                }}
-                                                gif={gif}
-                                                tabIndex={tabIndex}
-                                                key={gif.id}
-                                                width={gifWidth}
-                                                percentWidth={'100%'}
-                                                onGifClick={onGifClick}
-                                                onGifKeyPress={onGifKeyPress}
-                                                onGifSeen={onGifSeen}
-                                                onGifVisible={onGifVisible}
-                                                onGifRightClick={onGifRightClick}
-                                                user={user}
-                                                overlay={overlay}
-                                                backgroundColor={backgroundColor}
-                                                hideAttribution={hideAttribution}
-                                                noLink={noLink}
-                                                borderRadius={borderRadius}
-                                                fetchPriority={fetchPriority}
-                                            />
-                                        )
-                                    })}
-                                </div>
-                            )
-                        })}
+                        {sorter.map(([columnGifs = []], columnIndex) => (
+                            <div
+                                key={columnIndex}
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: gutter,
+                                    width: columnWidth,
+                                    marginTop: columnOffsets?.[columnIndex],
+                                }}
+                            >
+                                {columnGifs.map((gif) => (
+                                    <Gif
+                                        style={{
+                                            aspectRatio: gif.images.original.width / gif.images.original.height,
+                                        }}
+                                        gif={gif}
+                                        tabIndex={tabIndex}
+                                        key={gif.id}
+                                        width={gifWidth}
+                                        percentWidth={'100%'}
+                                        onGifClick={onGifClick}
+                                        onGifKeyPress={onGifKeyPress}
+                                        onGifSeen={onGifSeen}
+                                        onGifVisible={onGifVisible}
+                                        onGifRightClick={onGifRightClick}
+                                        user={user}
+                                        overlay={overlay}
+                                        backgroundColor={backgroundColor}
+                                        hideAttribution={hideAttribution}
+                                        noLink={noLink}
+                                        borderRadius={borderRadius}
+                                        fetchPriority={fetchPriority}
+                                    />
+                                ))}
+                            </div>
+                        ))}
                     </div>
                     {!showLoader && gifs.length === 0 && noResultsMessage}
                     {isError ? (

diff --git a/packages/react-components/stories/grid.stories.tsx b/packages/react-components/stories/grid.stories.tsx
@@ -126,6 +126,16 @@ export const GridResponsiveContainer: Story = {
     },
 }
 
+export const GridResponsiveContainerWithOffsets: Story = {
+    args: {
+        width: 1040,
+        columns: 4,
+        gutter: 10,
+        columnOffsets: [0, 0, 350, 350],
+        containerStyles: { width: 1040, backgroundColor: 'mediumpurple' },
+    },
+}
+
 export const GridCustomLoader: Story = {
     args: {
         loader: () => <h1 style={{ textAlign: 'center' }}> 🌀 </h1>,