Collapse expanded reasoning and tool-call panels by clicking their body - #469
Merged
Conversation
A long expanded reasoning trace or tool-call detail pushes the tiny header toggle far off-screen, so closing the panel meant scrolling all the way back up. Clicking anywhere on the expanded contents now collapses the panel. A shared guard (clickShouldCollapse in src/lib/ui/collapse-click.ts) leaves clicks on links, buttons, and the view-mode toggle to their own behavior, and skips the click that ends a text drag-selection so copying a passage does not snap the panel shut. The header and row buttons remain the accessible keyboard toggles; on the streaming reasoning panel a body-collapse click fires onToggle so the parent latches manual control the same way a header click does.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SYNOPSIS
Clicking anywhere on an expanded reasoning trace or tool-call detail now collapses it.
PURPOSE
A long expanded panel pushes its header toggle far off-screen; collapsing currently means scrolling all the way back up to the tiny chevron. This is especially painful on mobile.
DESCRIPTION
Today the reasoning block quote (
ReasoningPanel.svelte) and the tool-call detail (ToolCalls.svelte) each expand from a header/row button that is also the only way to close them.This PR adds a shared guard,
clickShouldCollapse(src/lib/ui/collapse-click.ts), and wires the expanded bodies to collapse on click. The guard excludes two click flavors:closest()so their own behavior winswindow.getSelection()), so copying a passage never snaps the panel shutOn the streaming reasoning panel, a body-collapse click fires
onToggleso the parent latches manual control exactly like a header click. Both bodies get a pointer cursor + "Click to collapse" tooltip.Notes:
svelte-ignorea11y comments are intentional: the header/row buttons remain the accessible keyboard toggles; the body click is a pointer-only convenience (role/tabindex on a wall of text would be worse for keyboard users)tests/collapse-click.test.tsis registered inenvironmentMatchGlobs(vite.config.ts)docs/user/chat.md,docs/dev/components.md,docs/dev/chat.md, and QA use-casechat-reasoning-collapse.md(steps 8-10; logged as not executed - cloud session has no browser)Generated by Claude Code