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

Author: sroy3

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) => {

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;