PR #7889 - getredash/redash

What type of PR is this?

Bug Fix

Description

Clicking a query or dashboard title to rename it swaps the title for an input that is much smaller than the title:

The field collapses. The antd <Input> sits inside .edit-in-place, an inline-block wrapper that sizes itself to its content, so the input falls back to its default ~20-character width and long titles get cut off.
Typing a longer title scrolls the field instead of giving it room.
The text shrinks to antd's 14px font. #4493 noted this as a side effect when the editor moved to antd.

This PR adds 18 lines of CSS to the shared .page-title styles in base.less. While a title is being edited, its .page-title takes the rest of the title row, and the input gets the full width and the title's font. There are no JavaScript changes.

Covers both the query and dashboard headers, since both use .page-title.
Uses :has(.edit-in-place.active). Browsers without :has() keep the current behavior.
While editing, the tags move to the right end of the title row and return afterwards. That fits #4097's direction of letting the input take over the title area in edit mode.

How is this tested?

Manually

Tested in Chrome against the Docker dev stack (make up), and at phone width with Playwright's iPhone 13 emulation:

Query title: the field opens at the full title row in the title's font. A ~105-character title fits without scrolling, the page doesn't scroll horizontally, and Escape cancels.
Dashboard title (layout edit mode): the field fills the row up to the owner avatar, and a long title fits.
Phone: the field takes the full row at the title's 18px font and stays within the screen.

I ran every CI job locally against this commit: backend and frontend lint, prettier, Jest and viz-lib tests, the production build, Cypress, the Playwright visual tests and pytest. They all pass. There are no JS changes, and the visual tests capture titles while they aren't being edited.

Related Tickets & Documents

Related to #4097 (Improve visibility of editable titles). This doesn't address discoverability, but it follows that issue's second conclusion about the input taking the title's space in edit mode. The smaller editing font comes from #4493. I couldn't find an existing issue about the input collapsing or clipping.