Better print layouts: wrap code blocks & force table column auto-sizing (#3236)

.changeset/rare-radios-thank.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Better print layouts: wrap code blocks & force table column auto-sizing

packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx

@@ -58,7 +58,7 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
                 <code
                     id={id}
                     className={tcls(
-                        'inline-grid min-w-full grid-cols-[auto_1fr] p-2 [count-reset:line]',
+                        'inline-grid min-w-full grid-cols-[auto_1fr] p-2 [count-reset:line] print:whitespace-pre-wrap',
                         withWrap && 'whitespace-pre-wrap'
                     )}
                 >

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

@@ -15,14 +15,14 @@ export function RecordRow(
         fixedColumns: string[];
     }
 ) {
-    const { view, autoSizedColumns, fixedColumns, block } = props;
+    const { view, autoSizedColumns, fixedColumns, block, context } = props;
 
     return (
         <div className={styles.row} role="row">
             {view.columns.map((column) => {
                 const columnWidth = getColumnWidth({
                     column,
-                    columnWidths: view.columnWidths,
+                    columnWidths: context.mode === 'print' ? undefined : view.columnWidths,
                     autoSizedColumns,
                     fixedColumns,
                 });

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

@@ -13,10 +13,10 @@ import { getColumnAlignment } from './utils';
      3. Auto-size is turned off without setting a width, we then default to a fixed width of 100px
 */
 export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
-    const { block, view, records, style } = props;
+    const { block, view, records, style, context } = props;
 
     /* Calculate how many columns are auto-sized vs fixed width */
-    const columnWidths = view.columnWidths;
+    const columnWidths = context.mode === 'print' ? undefined : view.columnWidths;
     const autoSizedColumns = view.columns.filter((column) => !columnWidths?.[column]);
     const fixedColumns = view.columns.filter((column) => columnWidths?.[column]);