update table styles

Author: dukenv0307

src/components/HTMLEngineProvider/HTMLRenderers/TableCellRenderer.tsx

@@ -4,9 +4,7 @@ import type {FlexStyle, TextStyle} from 'react-native';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import Text from '@components/Text';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 
 type CellAlignment = {
     alignItems: FlexStyle['alignItems'];
@@ -23,28 +21,14 @@ function getCellAlignment(styleAttribute: string | undefined): CellAlignment {
     return {alignItems: 'flex-start', textAlign: 'left'};
 }
 
-/**
- * Renders an HTML <th> or <td>. Cells share the row width equally; header cells use the smaller
- * label font and bold weight, while body cells use the normal message font.
- */
 function TableCellRenderer({tnode}: CustomRendererProps<TBlock>) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const isHeaderCell = tnode.tagName === 'th';
     const {alignItems, textAlign} = getCellAlignment(tnode.attributes.style);
 
     return (
-        <View style={[styles.flex1, {alignItems, paddingVertical: variables.tableRowPaddingVertical, paddingEnd: 8}]}>
-            <Text
-                style={[
-                    isHeaderCell ? styles.textBold : {},
-                    {
-                        color: theme.text,
-                        fontSize: isHeaderCell ? variables.fontSizeLabel : variables.fontSizeNormal,
-                        textAlign,
-                    },
-                ]}
-            >
+        <View style={[styles.htmlTableCell, {alignItems}]}>
+            <Text style={[isHeaderCell ? styles.htmlTableHeaderCellText : styles.htmlTableCellText, {textAlign}]}>
                 <TNodeChildrenRenderer tnode={tnode} />
             </Text>
         </View>

src/components/HTMLEngineProvider/HTMLRenderers/TableRenderer.tsx

@@ -1,43 +1,36 @@
 import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {TNodeRenderer} from 'react-native-render-html';
-import useTheme from '@hooks/useTheme';
-import variables from '@styles/variables';
+import useThemeStyles from '@hooks/useThemeStyles';
 
-/**
- * Renders an HTML <table> as a styled, highlighted container. The library has no built-in
- * table layout, so children (<thead>/<tbody>) are rendered as stacked blocks and the row/cell
- * layout is handled by the dedicated row and cell renderers.
- */
 function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
-    const theme = useTheme();
+    const styles = useThemeStyles();
 
     // Skip whitespace-only text nodes that sit between block elements in the source HTML.
     const sections = tnode.children.filter((child) => !!child.tagName);
 
     return (
-        <View
-            style={{
-                alignSelf: 'stretch',
-                marginVertical: 8,
-                borderRadius: variables.componentBorderRadiusNormal,
-                backgroundColor: theme.highlightBG,
-                overflow: 'hidden',
-            }}
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={styles.w100}
+            contentContainerStyle={styles.htmlTableScrollContainerContent}
         >
-            {sections.map((child, index) => {
-                const key = `${child.tagName ?? 'node'}-${index}`;
-                return (
-                    <TNodeRenderer
-                        key={key}
-                        tnode={child}
-                        renderIndex={index}
-                        renderLength={sections.length}
-                    />
-                );
-            })}
-        </View>
+            <View style={styles.htmlTable}>
+                {sections.map((child, index) => {
+                    const key = `${child.tagName ?? 'node'}-${index}`;
+                    return (
+                        <TNodeRenderer
+                            key={key}
+                            tnode={child}
+                            renderIndex={index}
+                            renderLength={sections.length}
+                        />
+                    );
+                })}
+            </View>
+        </ScrollView>
     );
 }
 

src/components/HTMLEngineProvider/HTMLRenderers/TableRowRenderer.tsx

@@ -2,34 +2,19 @@ import React from 'react';
 import {View} from 'react-native';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {TNodeRenderer} from 'react-native-render-html';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 
-/**
- * Renders an HTML <tr> as a flex row. Each row has a minimum height, horizontal padding and a
- * bottom border to separate it from the next row, matching how our other tables are displayed.
- */
 function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
     const styles = useThemeStyles();
-    const theme = useTheme();
+
+    // Header rows (inside <thead>) use header padding; body rows use the compact min-height.
+    const isHeaderRow = tnode.parent?.tagName === 'thead';
 
     // Skip whitespace-only text nodes that sit between cells in the source HTML.
     const cells = tnode.children.filter((child) => !!child.tagName);
 
     return (
-        <View
-            style={[
-                styles.flexRow,
-                styles.alignItemsCenter,
-                {
-                    minHeight: 40,
-                    paddingHorizontal: variables.tableRowPaddingHorizontal,
-                    borderBottomWidth: 1,
-                    borderColor: theme.border,
-                },
-            ]}
-        >
+        <View style={isHeaderRow ? styles.htmlTableHeaderRow : styles.htmlTableRow}>
             {cells.map((child, index) => {
                 const key = `${child.tagName ?? 'node'}-${index}`;
                 return (

src/styles/index.ts

@@ -2656,6 +2656,52 @@ const staticStyles = (theme: ThemeColors) =>
             minHeight: variables.tableHeaderContentHeight,
         },
 
+        htmlTableScrollContainerContent: {
+            flexGrow: 1,
+        },
+
+        htmlTable: {
+            minWidth: '100%',
+            marginVertical: 8,
+            borderRadius: variables.componentBorderRadius,
+            backgroundColor: theme.highlightBG,
+            overflow: 'hidden',
+        },
+
+        htmlTableHeaderRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: variables.tableRowPaddingHorizontal,
+            paddingVertical: variables.tableRowPaddingVertical,
+            borderBottomWidth: 1,
+            borderColor: theme.border,
+        },
+
+        htmlTableRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: variables.htmlTableRowMinHeight,
+            paddingHorizontal: variables.tableRowPaddingHorizontal,
+            borderBottomWidth: 1,
+            borderColor: theme.border,
+        },
+
+        htmlTableCell: {
+            flex: 1,
+            minWidth: variables.htmlTableColumnMinWidth,
+            paddingEnd: 8,
+        },
+
+        htmlTableCellText: {
+            color: theme.text,
+            fontSize: variables.fontSizeNormal,
+        },
+
+        htmlTableHeaderCellText: {
+            color: theme.textSupporting,
+            fontSize: variables.fontSizeLabel,
+        },
+
         borderBottom: {
             borderBottomWidth: 1,
             borderColor: theme.border,

src/styles/variables.ts

@@ -131,6 +131,8 @@ export default {
     tableRowHeightCompact: 60,
     tableRowPaddingVertical: 8,
     tableRowPaddingHorizontal: 12,
+    htmlTableRowMinHeight: 40,
+    htmlTableColumnMinWidth: 80,
     tableGroupRowPaddingVertical: 4,
     tableGroupRowHeight: 36,
     tableCheckboxColumnWidth: 20,