Fix double padding in `Dialog.InnerFlatList` on web (#5986)

* remove extra padding on web

* pass prop

3 files changed, 19 insertions, 12 deletions

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 8b43a85e4..c860c4dcf 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -267,7 +267,10 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
 
 export const InnerFlatList = React.forwardRef<
   ListMethods,
-  ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
+  ListProps<any> & {
+    webInnerStyle?: StyleProp<ViewStyle>
+    webInnerContentContainerStyle?: StyleProp<ViewStyle>
+  }
 >(function InnerFlatList({style, ...props}, ref) {
   const insets = useSafeAreaInsets()
   const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 43cb95b03..41a39ffda 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -210,21 +210,26 @@ export const ScrollableInner = Inner
 
 export const InnerFlatList = React.forwardRef<
   FlatList,
-  FlatListProps<any> & {label: string} & {webInnerStyle?: StyleProp<ViewStyle>}
->(function InnerFlatList({label, style, webInnerStyle, ...props}, ref) {
+  FlatListProps<any> & {label: string} & {
+    webInnerStyle?: StyleProp<ViewStyle>
+    webInnerContentContainerStyle?: StyleProp<ViewStyle>
+  }
+>(function InnerFlatList(
+  {label, style, webInnerStyle, webInnerContentContainerStyle, ...props},
+  ref,
+) {
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
       label={label}
       style={[
+        a.overflow_hidden,
+        a.px_0,
         // @ts-ignore web only -sfn
-        {
-          paddingHorizontal: 0,
-          maxHeight: 'calc(-36px + 100vh)',
-          overflow: 'hidden',
-        },
+        {maxHeight: 'calc(-36px + 100vh)'},
         webInnerStyle,
-      ]}>
+      ]}
+      contentContainerStyle={[a.px_0, webInnerContentContainerStyle]}>
       <FlatList
         ref={ref}
         style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 64ad2624a..8ced355e4 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -144,7 +144,7 @@ function GifList({
           a.mb_lg,
           a.flex_row,
           a.align_center,
-          !gtMobile && isWeb && a.gap_md,
+          !gtMobile && web(a.gap_md),
         ]}>
         {/* cover top corners */}
         <View
@@ -209,6 +209,7 @@ function GifList({
           native([a.px_xl, {minHeight: height}]),
           web(a.h_full_vh),
         ]}
+        style={[web(a.h_full_vh)]}
         ListHeaderComponent={
           <>
             {listHeader}
@@ -238,8 +239,6 @@ function GifList({
         onEndReached={onEndReached}
         onEndReachedThreshold={4}
         keyExtractor={(item: Gif) => item.id}
-        // @ts-expect-error web only
-        style={isWeb && {minHeight: '100vh'}}
         keyboardDismissMode="on-drag"
         ListFooterComponent={
           hasData ? (