diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css index 91d7312a40a..6c4be849469 100644 --- a/src/static/css/pad/chat.css +++ b/src/static/css/pad/chat.css @@ -59,20 +59,29 @@ } /* -- TITLE BAR -- */ +/* Single flex row, vertically centred: [ CHAT _ [] ] + - #titlelabel takes the remaining width so the controls sit at the + right edge. + - Source order is titlecross then titlesticky, which is also the + desired visual order (minus on the left, sticky on the right). */ #titlebar { font-weight: bold; - padding: 5px; + /* Equal horizontal padding so CHAT on the left and the sticky button on + the right sit the same distance from the title-bar edges. */ + padding: 5px 9px; + display: flex; + align-items: center; + gap: 8px; } #titlebar #titlelabel { - margin: 4px 0 0 4px; - display: inline; + margin: 0; font-size: 1.4rem; + flex: 1; } #titlebar .stick-to-screen-btn, #titlebar .hide-reduce-btn { font-size: 25px; color: inherit; - float: right; text-align: right; text-decoration: none; cursor: pointer; @@ -84,7 +93,12 @@ } #titlebar .stick-to-screen-btn { font-size: 10px; - padding-top: 2px; +} +/* The `_` glyph in #titlecross renders at the bottom of its em-box, which + places it visibly far below the CHAT baseline. Lift it without changing + the flex row layout. */ +#titlebar .hide-reduce-btn { + transform: translateY(-5px); } #titlebar .stick-to-screen-btn:focus-visible, #titlebar .hide-reduce-btn:focus-visible { @@ -147,12 +161,22 @@ color: inherit; } /* Scope: the inner .buttonicon span here is just a glyph holder. Its global - rule in icons.css applies `display: flex` which is fine for toolbar - +
diff --git a/src/tests/frontend-new/specs/change_user_name.spec.ts b/src/tests/frontend-new/specs/change_user_name.spec.ts index b4f906846c0..ac0d03797c5 100644 --- a/src/tests/frontend-new/specs/change_user_name.spec.ts +++ b/src/tests/frontend-new/specs/change_user_name.spec.ts @@ -33,3 +33,28 @@ test('Own user name is shown when you enter a chat', async ({page})=> { expect(chatText).toContain('😃') expect(chatText).toContain(chatMessage) }); + +// #7593 review: the previous fix capped #myusernameform at 75px so a plugin- +// supplied "Log out" button wouldn't overflow, but vanilla etherpad-lite has +// no such button and the cap just made the username field too small. The +// colibris skin also pre-existing override of margin-left:35px (chosen for +// the chatAndUsers sticky layout) has been aligned with the base 10px. +test('#myusernameform has 10px left margin and is not width-capped', async ({page}) => { + await toggleUserList(page); + + const styles = await page.evaluate(() => { + const form = document.querySelector('#myusernameform') as HTMLElement; + const input = document.querySelector('#myusernameedit') as HTMLElement; + return { + formMarginLeft: getComputedStyle(form).marginLeft, + formWidth: getComputedStyle(form).width, + inputWidth: getComputedStyle(input).width, + }; + }); + + expect(styles.formMarginLeft).toBe('10px'); + // The form should size to its content / parent flex behaviour, NOT be capped + // at 75px — width should comfortably exceed that. + expect(parseFloat(styles.formWidth)).toBeGreaterThan(80); + expect(parseFloat(styles.inputWidth)).toBeGreaterThan(80); +}); diff --git a/src/tests/frontend-new/specs/chat.spec.ts b/src/tests/frontend-new/specs/chat.spec.ts index 2543f1dfcc1..b568cba1e8a 100644 --- a/src/tests/frontend-new/specs/chat.spec.ts +++ b/src/tests/frontend-new/specs/chat.spec.ts @@ -115,3 +115,79 @@ test('Checks showChat=false URL Parameter hides chat then' + // chat should be visible. expect(await secondChatIcon.isVisible()).toBe(true) }); + +// Regression: applyShowChat(false) sets inline `display: none` on #chatbox via +// jQuery .hide(); re-enabling chat doesn't undo it, and chat.show() only flips +// visibility via the .visible class — so without an explicit display reset the +// box stays hidden by the lingering inline style. (PR #7597) +test('chat icon click reveals chatbox after a disable → enable cycle', async ({page}) => { + await showSettings(page); + await page.locator('label[for="options-disablechat"]').click(); + await expect(page.locator('#options-disablechat')).toBeChecked(); + await expect(page.locator('#chaticon')).toBeHidden(); + + await page.locator('label[for="options-disablechat"]').click(); + await expect(page.locator('#options-disablechat')).not.toBeChecked(); + await expect(page.locator('#chaticon')).toBeVisible(); + await hideSettings(page); + + await showChat(page); + await expect(page.locator('#chatbox')).toBeVisible(); + await expect(page.locator('#chatbox')).toHaveClass(/visible/); +}); + +// Title-bar layout / glyph regressions from #7590 review. +test('chat title bar lays out as a centred flex row with underscore minimize', async ({page}) => { + await showChat(page); + + // Minimize button uses an underscore (sits at the bottom of its em-box and + // reads as a proper minimize indicator); it must not silently revert to + // − or a hyphen. + await expect(page.locator('#titlecross')).toHaveText('_'); + + const styles = await page.evaluate(() => { + const cs = (sel: string) => getComputedStyle(document.querySelector(sel)!); + const rect = (sel: string) => document.querySelector(sel)!.getBoundingClientRect(); + const tb = rect('#titlebar'); + const lab = rect('#titlelabel'); + const sticky = rect('#titlesticky'); + return { + titlebarDisplay: cs('#titlebar').display, + titlebarAlignItems: cs('#titlebar').alignItems, + labelFlex: cs('#titlelabel').flexGrow, + crossFloat: cs('#titlecross').float, + crossTransform: cs('#titlecross').transform, + stickyFloat: cs('#titlesticky').float, + // Visual symmetry — CHAT's left edge sits roughly the same distance + // from the title-bar left edge as the rightmost button sits from the + // right edge. Tested via rendered geometry rather than CSS literal so + // we don't get tripped up by skin overrides (colibris ships its own + // #titlebar padding rule). + leftGap: lab.left - tb.left, + rightGap: tb.right - sticky.right, + }; + }); + expect(styles.titlebarDisplay).toBe('flex'); + expect(styles.titlebarAlignItems).toBe('center'); + // Title takes the remaining width so corner buttons sit at the right edge. + expect(styles.labelFlex).toBe('1'); + // Buttons are flex items, not floats — old `float: right` layout must stay gone. + expect(styles.crossFloat).toBe('none'); + expect(styles.stickyFloat).toBe('none'); + // 5px lift on #titlecross so the `_` glyph reads near the title's baseline + // rather than at the very bottom of the row. + expect(styles.crossTransform).not.toBe('none'); + // Padding looks symmetric (within 2px to allow for sub-pixel rounding). + expect(Math.abs(styles.leftGap - styles.rightGap)).toBeLessThanOrEqual(2); +}); + +// Regression: #chaticon was a
before the #7584 a11y refactor; once it +// became a