Cut overflowing comparison table text (#2381)

Author: sroy3

webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx

@@ -45,7 +45,9 @@ jest.mock('../../../shared/components/dragDrop/currentTarget', () => {
 const { postMessage } = vsCodeApi
 const mockPostMessage = jest.mocked(postMessage)
 
-const getPin = (element: HTMLElement) => within(element).getByRole('button')
+const getPin = (element: HTMLElement) =>
+  // eslint-disable-next-line testing-library/no-node-access
+  within(element?.parentElement || element).getByRole('button')
 
 describe('ComparisonTable', () => {
   afterEach(() => {

webview/src/plots/components/comparisonTable/ComparisonTableHeader.tsx

@@ -34,7 +34,7 @@ export const ComparisonTableHeader: React.FC<ComparisonTableHeaderProps> = ({
         className={styles.bullet}
         style={{ backgroundColor: displayColor }}
       />
-      {children}
+      <span className={styles.headerText}>{children}</span>
     </div>
   )
 }

webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx

@@ -44,7 +44,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
           <div className={styles.rowPath}>
             <button className={styles.rowToggler} onClick={toggleIsShownState}>
               <Icon icon={isShown ? ChevronDown : ChevronRight} />
-              {path}
+              <span className={styles.pathText}>{path}</span>
             </button>
             <CopyButton value={path} className={styles.copyButton} />
           </div>

webview/src/plots/components/comparisonTable/styles.module.scss

@@ -48,6 +48,13 @@ $gap: 4px;
   }
 }
 
+.headerText {
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .bullet {
   display: block;
   width: $bullet-size;
@@ -95,6 +102,7 @@ $gap: 4px;
   text-align: left;
   display: flex;
   user-select: text;
+  width: 100%;
 
   svg {
     fill: $fg-color;
@@ -182,9 +190,17 @@ $gap: 4px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  width: 100%;
 
   &:hover .copyButton {
     display: inline;
     font-size: 0.8125rem;
   }
 }
+
+.pathText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  direction: rtl;
+}