diff --git a/.changeset/rail-rename-unclamp.md b/.changeset/rail-rename-unclamp.md new file mode 100644 index 00000000..df1db543 --- /dev/null +++ b/.changeset/rail-rename-unclamp.md @@ -0,0 +1,5 @@ +--- +"aicodeman": patch +--- + +Renaming a session in the detailed vertical tab rail no longer leaves the 3-line name clamp on the inline editor: the card-row rule out-ranked the "unclamp while renaming" override. diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 81b17118..52dc85f7 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -18815,6 +18815,17 @@ html[data-tab-orientation='vertical'][data-tab-rail-detail='rich']:not(.tab-rail line-clamp: 3; } +/* The rule above out-ranks the shared "unclamp while renaming" override (it carries four more + selectors of specificity), so a detailed-rail row kept its 3-line clamp around the inline + editor. Restate the override at the same weight; it must stay AFTER the rule it beats. */ +html[data-tab-orientation='vertical'][data-tab-rail-detail='rich']:not(.tab-rail-compact) + .tab-rail + .session-tab + .tab-name.tab-name-renaming { + -webkit-line-clamp: unset; + line-clamp: unset; +} + html[data-tab-orientation='vertical'][data-tab-rail-detail='rich']:not(.tab-rail-compact) .tab-rail .session-tab .tab-folder { font-size: 0.66rem; margin-top: 0.1rem; diff --git a/test/inline-rename.test.ts b/test/inline-rename.test.ts index edee0564..99d5c205 100644 --- a/test/inline-rename.test.ts +++ b/test/inline-rename.test.ts @@ -581,54 +581,66 @@ describe('Inline rename input', () => { expect(await input.evaluate((node) => node.getBoundingClientRect().width)).toBeGreaterThan(0); }); - it('Vertical rail paints typing in an unclamped editor and restores the clamp on cancel', async () => { - await resetState(); - const id = 'vertical-live-input'; + // Both rail layouts: the simple rows clamp a name to 2 lines, the detailed (default) card rows to 3. + // The detailed rule out-ranks the shared "unclamp while renaming" override unless it is restated. + it.each([ + ['simple', '2'], + ['rich', '3'], + ])( + 'Vertical %s rail paints typing in an unclamped editor and restores its clamp on cancel', + async (detail, clamp) => { + await resetState(); + const id = `vertical-live-input-${detail}`; - await page.evaluate((sessionId) => { - const app = ( - window as unknown as { - app: { - sessions: Map; - startInlineRename: (id: string) => void; - }; - } - ).app; - document.documentElement.dataset.tabOrientation = 'vertical'; - const rail = document.getElementById('tabRail') as HTMLElement; - const tab = document.createElement('div'); - tab.setAttribute('data-test-tab', '1'); - tab.className = 'session-tab'; - tab.innerHTML = - `` + - 'w9-case: old'; - rail.appendChild(tab); - app.sessions.set(sessionId, { id: sessionId, name: 'w9-case: old' }); - app.startInlineRename(sessionId); - }, id); + await page.evaluate( + ({ sessionId, railDetail }) => { + const app = ( + window as unknown as { + app: { + sessions: Map; + startInlineRename: (id: string) => void; + }; + } + ).app; + document.documentElement.dataset.tabOrientation = 'vertical'; + document.documentElement.dataset.tabRailDetail = railDetail; + const rail = document.getElementById('tabRail') as HTMLElement; + const tab = document.createElement('div'); + tab.setAttribute('data-test-tab', '1'); + tab.className = 'session-tab'; + tab.innerHTML = + `` + + 'w9-case: old'; + rail.appendChild(tab); + app.sessions.set(sessionId, { id: sessionId, name: 'w9-case: old' }); + app.startInlineRename(sessionId); + }, + { sessionId: id, railDetail: detail } + ); - const label = page.locator(`.tab-name[data-session-id="${id}"]`); - const input = label.locator('input.tab-rename-input'); - await input.press(process.platform === 'darwin' ? 'Meta+A' : 'Control+A'); - await page.keyboard.type('edited title'); + const label = page.locator(`.tab-name[data-session-id="${id}"]`); + const input = label.locator('input.tab-rename-input'); + await input.press(process.platform === 'darwin' ? 'Meta+A' : 'Control+A'); + await page.keyboard.type('edited title'); - expect(await input.inputValue()).toBe('edited title'); - expect(await input.evaluate((node) => document.activeElement === node)).toBe(true); - expect(await label.evaluate((node) => node.classList.contains('tab-name-renaming'))).toBe(true); - expect(await label.evaluate((node) => getComputedStyle(node).webkitLineClamp)).toBe('none'); - expect(await input.evaluate((node) => node.getBoundingClientRect().width)).toBeGreaterThan(0); + expect(await input.inputValue()).toBe('edited title'); + expect(await input.evaluate((node) => document.activeElement === node)).toBe(true); + expect(await label.evaluate((node) => node.classList.contains('tab-name-renaming'))).toBe(true); + expect(await label.evaluate((node) => getComputedStyle(node).webkitLineClamp)).toBe('none'); + expect(await input.evaluate((node) => node.getBoundingClientRect().width)).toBeGreaterThan(0); - const settled = await page.evaluate((sessionId) => { - const app = (window as unknown as { app: { _activeRename: { cancel: () => void } | null } }).app; - app._activeRename?.cancel(); - const label = document.querySelector(`.tab-name[data-session-id="${sessionId}"]`) as HTMLElement; - return { - classActive: label.classList.contains('tab-name-renaming'), - inputPresent: !!label.querySelector('input.tab-rename-input'), - webkitLineClamp: getComputedStyle(label).webkitLineClamp, - }; - }, id); + const settled = await page.evaluate((sessionId) => { + const app = (window as unknown as { app: { _activeRename: { cancel: () => void } | null } }).app; + app._activeRename?.cancel(); + const label = document.querySelector(`.tab-name[data-session-id="${sessionId}"]`) as HTMLElement; + return { + classActive: label.classList.contains('tab-name-renaming'), + inputPresent: !!label.querySelector('input.tab-rename-input'), + webkitLineClamp: getComputedStyle(label).webkitLineClamp, + }; + }, id); - expect(settled).toEqual({ classActive: false, inputPresent: false, webkitLineClamp: '2' }); - }); + expect(settled).toEqual({ classActive: false, inputPresent: false, webkitLineClamp: clamp }); + } + ); });