fix(app): keep question dock buttons visible on mobile#24351
fix(app): keep question dock buttons visible on mobile#24351ajaytravel wants to merge 3 commits intoanomalyco:devfrom
Conversation
When no sticky session header is rendered (e.g. on mobile with no title), measure() removed the --question-prompt-max-height var, leaving the 100dvh CSS fallback. The dock would then exceed the visible content area and clip the next/dismiss buttons below the viewport. Use the scroller's top edge as the fallback so the dock stays bounded by the available content area in that case. Refs anomalyco#23730, anomalyco#22439
github-actions
Bot
added
needs:compliance
|
Thanks for your contribution! This PR doesn't have a linked issue. All PRs must reference an existing issue. Please:
See CONTRIBUTING.md for details. |
|
The following comment was made by an LLM, it may be inaccurate: Found a potentially related PR: PR #24022: fix(app): prevent question dock overflow This PR appears to be addressing a very similar issue - it's also about preventing question dock overflow, which is directly related to the mobile viewport clipping problem described in PR #24351. Both PRs are fixing issues with the question dock component overflowing and buttons being hidden/clipped. You should review whether these PRs are duplicates or if they address different aspects of the same problem. |
github-actions
Bot
removed
needs:issue
needs:compliance
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
…sure The previous heuristic walked into the scroller's first child and checked for a 'sticky' class, but that first child is the setContentRef wrapper (not the title), so the check never matched and measure() always fell back to removing the var \u2014 leaving 100dvh in place. Switch to the same [data-session-title] selector use-session-hash-scroll already uses. Drops the apologetic comment and an intermediate variable since names now reveal intent.
Avoid relying on document-level selectors when measuring the question dock. The message scroller and session title live in the same session panel as the dock, so scoping there keeps the calculation tied to the panel it affects.
2 participants
Issue for this PR
Closes #23730
Closes #22439
Type of change
What does this PR do?
On mobile, the question dock's next/dismiss buttons get clipped below the viewport when the dock has long content.
While preparing this fix I traced the DOM and found that
measure()was already silently broken: it ranscroller.firstElementChild.classList.contains("sticky"), but the scroller's first child is thesetContentRefwrapper<div class="min-w-0 w-full">— the sticky title is one level deeper. The check never matched, someasure()always hit theremovePropertypath and the CSS fallback100dvhwas the only thing setting the height. On desktop the available area is usually large enough to hide that, but on mobile long content overflows and the footer gets clipped.This PR makes
measure()do what it was trying to do:[data-session-title]selector (already used byuse-session-hash-scroll.ts) instead of walking throughfirstElementChild.#24022 fixes the same bug with broader scope (CSS
overflow-hiddenon dock containers,visualViewport.heightfor keyboard handling,paddingBottominset). This PR is the smaller measurement fix; happy to defer or compose.How did you verify your code works?
bun run typecheck— all 13 packages passbun run --cwd packages/app test:unit— 307 pass, 0 failbun run linton the changed file — 0 errors, no new warningsScreenshots / recordings
I don't have a phone harness set up to capture before/after; #24022 has video recordings of the same bug.
Checklist