bug(desktop): prompt anchor rail overlaps user messages at narrow widths

[me2seeks]

What happened

At narrow Desktop window widths the prompt anchor rail (maka-prompt-rail) visually covers the right edge of user-sent message bubbles instead of sitting clear of the transcript.

The rail is absolutely positioned over the chat scrollport (right: 12px, pointer-events: auto, z-index: var(--z-panel-action) in apps/desktop/src/renderer/styles/prompt-rail.css), while the transcript turn is full-width and centered (apps/desktop/src/renderer/maka-tokens.css: .maka-turn { max-width: var(--maka-reading-measure); margin: 0 auto; width: 100%; }) inside .maka-chatContent { padding-inline: var(--maka-transcript-gutter); } where the gutter collapses to 12px (clamp(var(--space-3), 4vw, var(--space-10))). Once the window is narrow enough that the reading column fills the scrollport, the ~22px-wide rail plus its 12px offset occupies the same ~34px the user bubble's right edge lives in, so ticks paint on top of the bubble and intercept its hit region.

There is no narrow-width escape hatch: packages/ui/src/prompt-anchor-rail.tsx only returns null when there are fewer than 3 ticks (if (railTurns.length < 3 || !host) return null;), and neither prompt-rail.css nor the rail component has a container/media query that hides the rail or reserves clearance at small widths.

Expected behavior: at widths where the rail cannot sit clear of the reading column, it should get out of the way — e.g. hide it below a scrollport/container threshold (the quote companion already hides its rail outright in workbar/side-chat.css), or reserve matching right clearance for the transcript — so user messages are never painted under navigation chrome.

How to reproduce

1. Open Maka Desktop with a Session that has >= 3 user prompts (rail renders).
2. Shrink the window width until the transcript turn spans the full scrollport (reading measure 800px no longer centers with side space).
3. Look at the right edge of any user bubble: rail ticks overlay the bubble's right edge; hovering/clicking there hits the tick, not the message.

Environment

• Maka commit: 54135dce5 (origin/main, 2026-09-23; verified via git fetch; local HEAD d5bc0fad3 is one commit behind, diff on the rail path is perf-only perf(desktop): stop idle and streaming render work #5608 with no geometry change)
• OS and version: platform-independent renderer constraint (reported on Windows; same CSS on macOS/Linux)
• Surface: Desktop
• Node.js version, if running from source: not applicable (pure renderer layout)

Logs, screenshots, or additional context

• Reporter screenshots: narrow window shows the vertical tick column overlapping the user bubble column on the right edge.
• No duplicate found: searched open issues for prompt rail (31 hits), rail (54 hits), narrow width (34 hits), overlap/cover (0 hits) — hits are e2e selection (Select Desktop e2e specs by what a change can reach, instead of all 103 #4478), WorkHub tracking (tracking(desktop): evolve WorkHub into a per-Runtime-Host conversational coordinator #3492), macOS e2e lane (ci: add a macOS e2e lane so platform-specific renderer regressions cannot sail through green #2342), rail highlight/scroll flakes (fix(ui): keep the prompt rail highlight inside the rail when the rail resizes #2324, Prompt rail loses the active Turn highlight while scrolling the transcript #4415, flaky(e2e): prompt-rail:370 re-reads the rail after the poll that settled it #4675, test(desktop): prompt-rail focused-turn eviction flakes in CI #3121), all closed or unrelated; open bug + desktop list (26 issues, e.g. bug(desktop): Workbar cannot expand beyond 600px #5578 workbar cap, fix(ui): reserve chat/composer height when both ArtifactPane and BrowserPanel are open at narrow widths #824 was the old narrow-width bottom-sheet case, closed) contains no prompt-rail-overlap report.
• Related files:
  • apps/desktop/src/renderer/styles/prompt-rail.css (.maka-prompt-rail absolute, right: calc(var(--space-1) + var(--space-2)))
  • packages/ui/src/prompt-anchor-rail.tsx (hide condition only < 3 ticks, no width check)
  • apps/desktop/src/renderer/styles/chat-header.css (.maka-chatContent gutter)
  • apps/desktop/src/renderer/maka-tokens.css (--maka-reading-measure: 800px, --maka-transcript-gutter, .maka-turn geometry)
• Existing narrow-surface precedent: .maka-quote-companion .maka-prompt-rail-host { display: none; } (workbar/side-chat.css).

[Totoro-qaq]

take

[Totoro-qaq]

While fixing this I found the overlap is larger in the default layout. When the Workbar edge toggle is shown (togglePosition: 'edge'), workbar/shell.css moves the rail to right: 48px, so it takes 82px from the scrollport's edge, while the space right of a filled column is at most 56px (4vw + 16px). In Storybook that covers user bubbles by 24–26px whenever the chat is narrower than about 964px: with the Workbar open at every width I tried (1024–1600px), or 1024–1180px windows with it collapsed.

Before I rework #5630 (its viewport breakpoint only covers the 12px case, and it also hides WorkHub's rail), which direction would you prefer: hiding the rail when it can't sit clear, reserving room on the right of the transcript while the rail is shown, or arranging the rail and the edge toggle so they don't compete?