fix native scroll

Author: dukenv0307

src/components/HTMLEngineProvider/HTMLRenderers/TableRenderer.tsx

@@ -1,11 +1,12 @@
-import ScrollView from '@components/ScrollView';
-
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import variables from '@styles/variables';
+
 import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
 
 import {useContext, useMemo} from 'react';
 import {View} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import {useContentWidth} from 'react-native-render-html';
 
 import type {CellHorizontalAlignment} from './TableColumnAlignmentContext';
@@ -39,18 +40,20 @@ function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
     // outside a comment. A concrete number is required because a percentage does not resolve inside a horizontal ScrollView.
     const measuredContentWidth = useContext(TableContentWidthContext);
     const fallbackContentWidth = useContentWidth();
-    const minWidth = measuredContentWidth || fallbackContentWidth;
+    const viewportWidth = measuredContentWidth || fallbackContentWidth;
+    const columnsWidth = columnAlignments.length * variables.htmlTableColumnMaxWidth + 2 * variables.tableRowPaddingHorizontal;
+    const contentWidth = Math.max(viewportWidth, columnsWidth);
 
     return (
         <TableColumnAlignmentContext.Provider value={columnAlignments}>
             <ScrollView
                 horizontal
+                shouldActivateOnStart
                 showsHorizontalScrollIndicator={false}
-                style={styles.w100}
-                contentContainerStyle={styles.htmlTableScrollContainerContent}
+                style={{width: viewportWidth}}
+                contentContainerStyle={{width: contentWidth}}
             >
-                {/* The width makes the table fill the available message width; it still grows wider and scrolls horizontally when the columns need more room than that. */}
-                <View style={[styles.htmlTable, {minWidth}]}>
+                <View style={styles.htmlTable}>
                     <TableChildrenRenderer tnode={tnode} />
                 </View>
             </ScrollView>

src/styles/index.ts

@@ -2696,10 +2696,6 @@ const staticStyles = (theme: ThemeColors) =>
             minHeight: variables.tableHeaderContentHeight,
         },
 
-        htmlTableScrollContainerContent: {
-            flexGrow: 1,
-        },
-
         htmlTable: {
             marginVertical: 8,
             borderRadius: variables.componentBorderRadius,
@@ -2730,7 +2726,13 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         htmlTableCell: {
-            flex: 1,
+            // A definite flexBasis (not flex: 1 / basis 0) keeps columns aligned across rows inside the horizontal
+            // ScrollView, where the indefinite main-axis width otherwise collapses each cell to its content width.
+            // flexShrink: 0 stops columns from shrinking to fit the viewport, so a wide table overflows and can be
+            // scrolled horizontally; flexGrow: 1 still lets columns expand to fill the message width when it is wider.
+            flexGrow: 1,
+            flexShrink: 0,
+            flexBasis: variables.htmlTableColumnMaxWidth,
             minWidth: variables.htmlTableColumnMinWidth,
             paddingEnd: 8,
         },