From 2f3ac892c5831f41b9af5a7960d5a13fbddb1742 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 17 Jan 2025 12:46:08 -0600
Subject: [PATCH] Fix grid layout trailing single item

---
 src/components/Grid.tsx                       | 59 +++++++++++++++++++
 src/components/feeds/PostFeedVideoGridRow.tsx | 21 ++++---
 2 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Grid.tsx

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
new file mode 100644
index 0000000000..d71a46c0b7
--- /dev/null
+++ b/src/components/Grid.tsx
@@ -0,0 +1,59 @@
+import {createContext, useContext,useMemo} from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, ViewStyleProp} from '#/alf'
+
+const Context = createContext({
+  gap: 0,
+})
+
+export function Row({
+  children,
+  gap = 0,
+  style,
+}: ViewStyleProp & {
+  children: React.ReactNode
+  gap?: number
+}) {
+  return (
+    <Context.Provider value={useMemo(() => ({gap}), [gap])}>
+      <View
+        style={[
+          a.flex_row,
+          a.flex_1,
+          {
+            marginLeft: -gap / 2,
+            marginRight: -gap / 2,
+          },
+          style,
+        ]}>
+        {children}
+      </View>
+    </Context.Provider>
+  )
+}
+
+export function Col({
+  children,
+  width = 1,
+  style,
+}: ViewStyleProp & {
+  children: React.ReactNode
+  width?: number
+}) {
+  const {gap} = useContext(Context)
+  return (
+    <View
+      style={[
+        a.flex_col,
+        {
+          paddingLeft: gap / 2,
+          paddingRight: gap / 2,
+          width: `${width * 100}%`,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
diff --git a/src/components/feeds/PostFeedVideoGridRow.tsx b/src/components/feeds/PostFeedVideoGridRow.tsx
index 88a03ddaa3..688fb961a1 100644
--- a/src/components/feeds/PostFeedVideoGridRow.tsx
+++ b/src/components/feeds/PostFeedVideoGridRow.tsx
@@ -4,6 +4,7 @@ import {AppBskyEmbedVideo} from '@atproto/api'
 import {FeedPostSliceItem} from '#/state/queries/post-feed'
 import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {atoms as a, useGutters} from '#/alf'
+import * as Grid from '#/components/Grid'
 import {
   VideoPostCard,
   VideoPostCardPlaceholder,
@@ -33,15 +34,17 @@ export function PostFeedVideoGridRow({
   return (
     <View style={[gutters]}>
       <View style={[a.flex_row, a.gap_sm]}>
-        {posts.map(post => (
-          <View key={post.post.uri} style={[a.flex_1]}>
-            <VideoPostCard
-              post={post.post}
-              sourceContext={sourceContext}
-              moderation={post.moderation}
-            />
-          </View>
-        ))}
+        <Grid.Row gap={a.gap_sm.gap}>
+          {posts.map(post => (
+            <Grid.Col key={post.post.uri} width={1 / 2}>
+              <VideoPostCard
+                post={post.post}
+                sourceContext={sourceContext}
+                moderation={post.moderation}
+              />
+            </Grid.Col>
+          ))}
+        </Grid.Row>
       </View>
     </View>
   )