feat(viewer): responsive mobile layout with drawer sidebar#9
Merged
Conversation
benvinegar
force-pushed
the
claude/keen-shannon-88mhth
branch
from
8b32558 to
3ab7268
Compare
Below 700px the fixed 248px aside left ~120px for the stream and the layout broke. The sidebar now slides in as an off-canvas drawer behind a slim top bar (hamburger with an unread dot, brand, live indicator), the stream takes the full width, and hover-only actions (card open/delete, session delete) stay visible on narrow or touch screens. https://claude.ai/code/session_01SqNrCv6FbdqxLXeaNhjNe6
benvinegar
force-pushed
the
claude/keen-shannon-88mhth
branch
from
3ab7268 to
2335ff7
Compare
benvinegar
pushed a commit
that referenced
this pull request
Jun 12, 2026
… the Solid viewer main changed the old inline-JS viewer this branch replaced; the conflict resolution re-implements both changes in viewer/src/: - optimistic comment echo (pending until POST confirms, deduped against the SSE refetch by id), failed sends restore the input with a toast - new snippets only auto-scroll near the bottom; otherwise the "new snippet" pill offers the jump - unread activity badges the tab title; returning to the tab clears the selected session; hidden-tab activity counts as away - SSE reconnect resyncs the session list, snippets, and comments - sidebar collapses into an off-canvas drawer behind a top bar below 700px; hover-only actions stay visible on narrow/touch screens All 10 e2e tests (5 new from main) pass on chromium. https://claude.ai/code/session_01ApwZm1DNZoCQTJHha19thS
benvinegar
added a commit
that referenced
this pull request
Jun 12, 2026
…ild (#11) Rewrites the viewer from inline vanilla JS to Solid components in viewer/src/, typed against server/types.ts. Vite + vite-plugin-singlefile builds one self-contained viewer/dist/index.html, so both runtimes keep serving the viewer as a single in-memory document — no static-asset routes; auth and withOrigin rewriting unchanged. Includes the re-implementation of main's feedback-loop fixes (#8) and mobile drawer (#9) in the Solid viewer; the full e2e suite covers both.
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.
Add responsive design for phone widths (≤700px) that collapses the sidebar into an off-canvas drawer behind a slim top bar, while the stream takes the full width. This fixes layout breakage on mobile devices and ensures hover-only actions remain accessible on narrow or touch screens.
Key changes:
#liveto.livedotclass to support multiple live indicators (top bar + sidebar).topbarheader with hamburger menu button and unread indicator dotsetLive()helper to update all live indicators at onceImplementation details:
position: fixedwithtransform: translateX(-105%)for smooth off-canvas animationhttps://claude.ai/code/session_01SqNrCv6FbdqxLXeaNhjNe6