[TravisCossarini]

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. Update EditInPlace to use Antd components #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 Improve visibility of editable titles  #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.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Desktop: before, the field collapses and scrolls while typing:

Desktop: after, the field fills the title row in the title's font:

Mobile (iPhone 13 emulation, 390px)

Before	After

🤖 Generated with Claude Code

[greptile-apps]

Confidence Score: 5/5

[Low impact] The PR appears safe to merge; no actionable issues were found.

Summary

Updates the shared title styles so query and dashboard title editors use more space and inherit the title font.

• Editing query and dashboard titles gives the field room and matching text.

_{Reviews (2) · Last reviewed commit: "Merge branch 'master' into fix/query-tit..." · Reviewed by Greptile}

[cubic-dev-ai]

No issues found across 1 file

_{View guided diff | Re-trigger cubic}