refactor: clarify truncation ownership

src/content/components/virtual-preview-list.ts

@@ -270,19 +270,14 @@ export class VirtualPreviewList extends LitElement {
     .old-name {
       font-size: 12px;
       color: var(--cdr-text-secondary, #595959);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex: 1 1 0;
-      min-width: 0;
     }
 
     .old-name.old-name-secondary {
+      flex: 1 1 0;
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      flex: 1 1 0;
-      min-width: 0;
     }
 
     .new-name {
@@ -300,14 +295,9 @@ export class VirtualPreviewList extends LitElement {
     .new-name-text {
       flex: 1 1 0;
       min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
 
     .new-name-primary .new-name-text {
-      flex: 1 1 0;
-      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

tests/unit/virtual-preview-list.test.ts

@@ -189,7 +189,7 @@ describe('VirtualPreviewList pending preview mapping', () => {
     const staticCss = stylesArray
       .map((result) => ('cssText' in result ? (result as any).cssText : result.toString()))
       .join(' ');
-    const extractBlock = (selector: string) => {
+    const selectorBlock = (selector: string) => {
       const start = staticCss.indexOf(selector);
       expect(start, `missing ${selector}`).toBeGreaterThan(-1);
       const braceOpen = staticCss.indexOf('{', start);
@@ -197,15 +197,25 @@ describe('VirtualPreviewList pending preview mapping', () => {
       return staticCss.slice(braceOpen + 1, braceClose);
     };
 
-    const oldNameDeclarations = extractBlock('.old-name.old-name-secondary');
+    const oldNameDeclarations = selectorBlock('.old-name.old-name-secondary');
-    expect(oldNameDeclarations).toContain('flex: 1 1 0');
-    expect(oldNameDeclarations).toContain('min-width: 0');
     expect(oldNameDeclarations).toContain('overflow: hidden');
+    expect(oldNameDeclarations).toContain('text-overflow: ellipsis');
+    expect(oldNameDeclarations).toContain('white-space: nowrap');
 
-    const newNameDeclarations = extractBlock('.new-name-primary .new-name-text');
+    const baseOldNameDeclarations = selectorBlock('.old-name');
-    expect(newNameDeclarations).toContain('flex: 1 1 0');
+    expect(baseOldNameDeclarations).not.toContain('overflow: hidden');
-    expect(newNameDeclarations).toContain('min-width: 0');
+    expect(baseOldNameDeclarations).not.toContain('text-overflow: ellipsis');
+    expect(baseOldNameDeclarations).not.toContain('white-space: nowrap');
+
+    const newNameDeclarations = selectorBlock('.new-name-primary .new-name-text');
     expect(newNameDeclarations).toContain('overflow: hidden');
+    expect(newNameDeclarations).toContain('text-overflow: ellipsis');
+    expect(newNameDeclarations).toContain('white-space: nowrap');
+
+    const baseNewNameDeclarations = selectorBlock('.new-name-text');
+    expect(baseNewNameDeclarations).not.toContain('overflow: hidden');
+    expect(baseNewNameDeclarations).not.toContain('text-overflow: ellipsis');
+    expect(baseNewNameDeclarations).not.toContain('white-space: nowrap');
 
     element.remove();
   });