Have all nodes within a text-cells adhere to alignments

packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -115,7 +115,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
                 return <Tag className={tcls(['w-full', verticalAlignment])}>{''}</Tag>;
             }
 
-            const alignment = getColumnAlignment(definition);
+            const horizontalAlignment = `[&_*]:${getColumnAlignment(definition)} ${getColumnAlignment(definition)}`;
 
             return (
                 <Blocks
@@ -130,8 +130,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
                         'lg:space-y-3',
                         'leading-normal',
                         verticalAlignment,
-                        alignment === 'right' ? 'text-right' : null,
-                        alignment === 'center' ? 'text-center' : null,
+                        horizontalAlignment,
                     ]}
                     context={context}
                     blockStyle={['w-full', 'max-w-[unset]']}

packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

@@ -42,32 +42,28 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                         )}
                     >
                         <div role="row" className={tcls('flex', 'w-full')}>
-                            {view.columns.map((column) => {
-                                const alignment = getColumnAlignment(block.data.definition[column]);
-                                return (
-                                    <div
-                                        key={column}
-                                        role="columnheader"
-                                        className={tcls(
-                                            styles.columnHeader,
-                                            alignment === 'right' ? 'text-right' : null,
-                                            alignment === 'center' ? 'text-center' : null
-                                        )}
-                                        style={{
-                                            width: getColumnWidth({
-                                                column,
-                                                columnWidths,
-                                                autoSizedColumns,
-                                                fixedColumns,
-                                            }),
-                                            minWidth: columnWidths?.[column] || '100px',
-                                        }}
-                                        title={block.data.definition[column].title}
-                                    >
-                                        {block.data.definition[column].title}
-                                    </div>
-                                );
-                            })}
+                            {view.columns.map((column) => (
+                                <div
+                                    key={column}
+                                    role="columnheader"
+                                    className={tcls(
+                                        styles.columnHeader,
+                                        getColumnAlignment(block.data.definition[column])
+                                    )}
+                                    style={{
+                                        width: getColumnWidth({
+                                            column,
+                                            columnWidths,
+                                            autoSizedColumns,
+                                            fixedColumns,
+                                        }),
+                                        minWidth: columnWidths?.[column] || '100px',
+                                    }}
+                                    title={block.data.definition[column].title}
+                                >
+                                    {block.data.definition[column].title}
+                                </div>
+                            ))}
                         </div>
                     </div>
                 )}

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -23,7 +23,7 @@
 }
 
 .columnHeader {
-    @apply text-sm font-medium py-2 px-4 text-tint-strong;
+    @apply text-sm font-medium py-2 px-3 text-tint-strong;
 }
 
 .row {

packages/gitbook/src/components/DocumentView/Table/utils.ts

@@ -1,4 +1,5 @@
 import type { ContentRef, DocumentTableDefinition, DocumentTableRecord } from '@gitbook/api';
+import assertNever from 'assert-never';
 
 /**
  * Get the value for a column in a record.
@@ -14,11 +15,24 @@ export function getRecordValue<T extends number | string | boolean | string[] |
 /**
  * Get the text alignment for a column.
  */
-export function getColumnAlignment(column: DocumentTableDefinition): 'left' | 'right' | 'center' {
+export function getColumnAlignment(column: DocumentTableDefinition) {
+    const defaultAlignment = 'text-left';
+
     if (column.type === 'text') {
-        return column.textAlignment ?? 'left';
+        switch (column.textAlignment) {
+            case undefined:
+            case 'left':
+                return defaultAlignment;
+            case 'center':
+                return 'text-center';
+            case 'right':
+                return 'text-right';
+            default:
+                assertNever(column.textAlignment);
+        }
     }
-    return 'left';
+
+    return defaultAlignment;
 }
 
 /**

packages/gitbook/src/components/primitives/Button.tsx

@@ -90,7 +90,7 @@ export function Button({
         'contrast-more:hover:ring-2',
         'contrast-more:hover:ring-tint-12',
 
-        'hover:scale-105',
+        'hover:scale-104',
         'active:scale-100',
         'transition-all',
 

packages/gitbook/tailwind.config.ts

@@ -443,6 +443,7 @@ const config: Config = {
             scale: {
                 '98': '0.98',
                 '102': '1.02',
+                '104': '1.04',
             },
         },
         opacity: opacity(),