Fixing table width on split and inline view

Author: praneshr

src/index.tsx

@@ -523,14 +523,20 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
 
     const title = (leftTitle || rightTitle)
       && <tr>
-        <td colSpan={splitView ? 3 : 5} className={this.styles.titleBlock}>{leftTitle}</td>
+        <td colSpan={splitView ? 3 : 5} className={this.styles.titleBlock}>
+          <pre className={this.styles.contentText}>
+            {leftTitle}
+          </pre>
+        </td>
         {splitView
-          && <td colSpan={3} className={this.styles.titleBlock}>{rightTitle}</td>
+          && <td colSpan={3} className={this.styles.titleBlock}>
+            <pre className={this.styles.contentText}>{rightTitle}</pre>
+          </td>
         }
       </tr>;
 
     return (
-      <table className={this.styles.diffContainer}>
+      <table className={cn(this.styles.diffContainer, { [this.styles.splitView]: splitView })}>
         <tbody>
           {title}
           {nodes}

src/styles.ts

@@ -21,6 +21,7 @@ export interface ReactDiffViewerStyles {
   codeFold?: string;
   titleBlock?: string;
   content?: string;
+  splitView?: string;
   [key: string]: string | undefined;
 }
 
@@ -74,6 +75,7 @@ export interface ReactDiffViewerStylesOverride {
   emptyLine?: Interpolation;
   content?: Interpolation;
   titleBlock?: Interpolation;
+  splitView?: Interpolation;
 }
 
 export default (
@@ -148,6 +150,18 @@ export default (
 
   const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
 
+  const content = css({
+    width: '100%',
+    label: 'content',
+  });
+
+  const splitView = css({
+    [`.${content}`]: {
+      width: '50%',
+    },
+    label: 'split-view',
+  });
+
   const diffContainer = css({
     width: '100%',
     background: variables.diffViewerBackground,
@@ -158,32 +172,30 @@ export default (
     },
     label: 'diff-container',
     borderCollapse: 'collapse',
+
   });
 
   const codeFoldContent = css({
     color: variables.codeFoldContentColor,
     label: 'code-fold-content',
   });
 
+  const contentText = css({
+    color: variables.diffViewerColor,
+    label: 'content-text',
+  });
+
   const titleBlock = css({
-    color: variables.diffViewerTitleColor,
     background: variables.diffViewerTitleBackground,
     padding: 10,
     borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
     label: 'title-block',
     ':last-child': {
       borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
     },
-  });
-
-  const content = css({
-    width: '50%',
-    label: 'content',
-  });
-
-  const contentText = css({
-    color: variables.diffViewerColor,
-    label: 'content-text',
+    [`.${contentText}`]: {
+      color: variables.diffViewerTitleColor,
+    },
   });
 
   const lineNumber = css({
@@ -260,6 +272,7 @@ export default (
   const marker = css({
     width: 25,
     paddingLeft: 10,
+    paddingRight: 10,
     userSelect: 'none',
     label: 'marker',
     [`&.${diffAdded}`]: {
@@ -334,6 +347,7 @@ export default (
     diffContainer,
     diffRemoved,
     diffAdded,
+    splitView,
     marker,
     highlightedGutter,
     highlightedLine,