Merge pull request #4266 from tloncorp/po/tlon-3316-fix-gallery-item-…

…size-issues gallery: fix item size issues on desktop
tloncorp · Dec 9, 2024 · 6d0f9fa · 6d0f9fa
2 parents 86950b3 + db76b4c
commit 6d0f9fa
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/packages/ui/src/components/Channel/Scroller.tsx b/packages/ui/src/components/Channel/Scroller.tsx
@@ -32,7 +32,7 @@ import {
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { View, styled, useStyle, useTheme } from 'tamagui';
+import { View, getTokenValue, styled, useStyle, useTheme } from 'tamagui';
 
 import { RenderItemType } from '../../contexts/componentsKits';
 import { useLivePost } from '../../contexts/requests';
@@ -201,10 +201,10 @@ const Scroller = forwardRef(
 
     const theme = useTheme();
 
-    // Used to hide the scroller until we've found the anchor post.
     const style = useMemo(() => {
       return {
         backgroundColor: theme.background.val,
+        // Used to hide the scroller until we've found the anchor post.
         opacity: readyToDisplayPosts ? 1 : 0,
       };
     }, [readyToDisplayPosts, theme.background.val]);
@@ -268,6 +268,7 @@ const Scroller = forwardRef(
             messageRef={activeMessageRefs.current[post.id]}
             dividersEnabled={collectionLayout.dividersEnabled}
             itemAspectRatio={collectionLayout.itemAspectRatio ?? undefined}
+            columnCount={collectionLayout.columnCount}
             {...anchorScrollLockScrollerItemProps}
           />
         );
@@ -290,6 +291,7 @@ const Scroller = forwardRef(
         showDividers,
         collectionLayout.dividersEnabled,
         collectionLayout.itemAspectRatio,
+        collectionLayout.columnCount,
       ]
     );
 
@@ -335,6 +337,9 @@ const Scroller = forwardRef(
         : {
             gap: '$l',
             width: '100%',
+            // Necessary to prevent content from flowing off the right side of the
+            // screen when the scroller is in two-column mode.
+            paddingRight: '$l',
           }
     ) as StyleProp<ViewStyle>;
 
@@ -580,6 +585,7 @@ const BaseScrollerItem = ({
   isLastPostOfBlock,
   dividersEnabled,
   itemAspectRatio,
+  columnCount,
 }: {
   showUnreadDivider: boolean;
   showAuthor: boolean;
@@ -603,6 +609,7 @@ const BaseScrollerItem = ({
   isLastPostOfBlock: boolean;
   dividersEnabled: boolean;
   itemAspectRatio?: number;
+  columnCount: number;
 }) => {
   const post = useLivePost(item);
 
@@ -652,7 +659,11 @@ const BaseScrollerItem = ({
   }, [dividerType, post, unreadCount, showDayDivider]);
 
   return (
-    <View onLayout={handleLayout} flex={1} aspectRatio={itemAspectRatio}>
+    <View
+      onLayout={handleLayout}
+      width={columnCount === 2 ? '50%' : '100%'}
+      aspectRatio={itemAspectRatio}
+    >
       {divider}
       <PressableMessage
         ref={messageRef}