diff --git a/src/content/components/virtual-preview-list.ts b/src/content/components/virtual-preview-list.ts index b4a0689..2edc636 100644 --- a/src/content/components/virtual-preview-list.ts +++ b/src/content/components/virtual-preview-list.ts @@ -273,12 +273,16 @@ export class VirtualPreviewList extends LitElement { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex: 1 1 0; + min-width: 0; } .old-name.old-name-secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex: 1 1 0; + min-width: 0; } .new-name { @@ -293,9 +297,16 @@ export class VirtualPreviewList extends LitElement { gap: 8px; } - .new-name-text, - .new-name.new-name-primary .new-name-text { - flex: 1; + .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; diff --git a/tests/unit/virtual-preview-list.test.ts b/tests/unit/virtual-preview-list.test.ts index 5847543..c9885fc 100644 --- a/tests/unit/virtual-preview-list.test.ts +++ b/tests/unit/virtual-preview-list.test.ts @@ -183,26 +183,29 @@ describe('VirtualPreviewList pending preview mapping', () => { const newNameText = previewContent?.querySelector('.new-name-text'); expect(newNameText).toBeTruthy(); - const styleContent = Array.from(element.shadowRoot?.querySelectorAll('style') ?? []) - .map((style) => style.textContent ?? '') + const stylesArray = Array.isArray(VirtualPreviewList.styles) + ? VirtualPreviewList.styles + : [VirtualPreviewList.styles]; + const staticCss = stylesArray + .map((result) => ('cssText' in result ? (result as any).cssText : result.toString())) .join(' '); const extractBlock = (selector: string) => { - const start = styleContent.indexOf(selector); + const start = staticCss.indexOf(selector); expect(start, `missing ${selector}`).toBeGreaterThan(-1); - const braceOpen = styleContent.indexOf('{', start); - const braceClose = styleContent.indexOf('}', braceOpen); - return styleContent.slice(braceOpen + 1, braceClose); + const braceOpen = staticCss.indexOf('{', start); + const braceClose = staticCss.indexOf('}', braceOpen); + return staticCss.slice(braceOpen + 1, braceClose); }; const oldNameDeclarations = extractBlock('.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.new-name-primary .new-name-text'); + const newNameDeclarations = extractBlock('.new-name-primary .new-name-text'); + expect(newNameDeclarations).toContain('flex: 1 1 0'); + expect(newNameDeclarations).toContain('min-width: 0'); expect(newNameDeclarations).toContain('overflow: hidden'); - expect(newNameDeclarations).toContain('text-overflow: ellipsis'); - expect(newNameDeclarations).toContain('white-space: nowrap'); element.remove(); });