Make comparison table row path take more space if available (#2491)

iterative · Sep 29, 2022 · ec62491 · ec62491
1 parent 1953b6e
commit ec62491
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx
@@ -41,7 +41,10 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
   return (
     <>
       <tr>
-        <td className={cx({ [styles.pinnedColumnCell]: pinnedColumn })}>
+        <td
+          className={cx({ [styles.pinnedColumnCell]: pinnedColumn })}
+          colSpan={pinnedColumn ? 1 : nbColumns}
+        >
           <div className={styles.rowPath}>
             <button className={styles.rowToggler} onClick={toggleIsShownState}>
               <Icon icon={isShown ? ChevronDown : ChevronRight} />
@@ -56,7 +59,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
             <CopyButton value={path} className={styles.copyButton} />
           </div>
         </td>
-        {nbColumns > 1 && <td colSpan={nbColumns - 1}></td>}
+        {nbColumns > 1 && pinnedColumn && <td colSpan={nbColumns - 1}></td>}
       </tr>
       <tr>
         {plots.map((plot: ComparisonPlot) => {

diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -102,7 +102,7 @@ $gap: 4px;
   text-align: left;
   display: flex;
   user-select: text;
-  width: calc(100% - 20px);
+  max-width: calc(100% - 20px);
 
   svg {
     fill: $fg-color;