🤖 feat: add mobile toggle for Review panel #511
Draft
+378
−139
Conversation
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
ThomasK33
force-pushed
the
mobile-review
branch
3 times, most recently
from
7117bd4 to
673cbe5
Compare
added 6 commits
November 5, 2025 11:43
Add a Floating Action Button (FAB) to access the right sidebar (Costs/Review panels) on mobile devices where it was previously inaccessible. Changes: - Add FAB button in bottom-right corner (mobile only) - Implement slide-in animation from right (mirrors left sidebar) - Add backdrop overlay with click-to-close - Add close button inside sidebar for explicit dismissal - Update mobile styles to use fixed positioning with transform The right sidebar now slides in from the right on mobile when the FAB is clicked, providing access to the Review and Costs panels that were previously hidden on narrow screens. _Generated with `cmux`_ Change-Id: I16419aef58f515366f5dec90f3e9d27cc368069c Signed-off-by: Test <test@example.com>
Fix ESLint warnings for Tailwind CSS classnames ordering. _Generated with `cmux`_ Change-Id: I2a9cc2f02ccbf3cce2a4c20cb8f6fccfffb12457 Signed-off-by: Test <test@example.com>
Add touch gesture support for opening/closing the right sidebar on mobile: - Swipe left from right edge (last 50px) to open sidebar - Swipe right from anywhere to close sidebar - Gestures must be horizontal, at least 50px, and fast (< 300ms) - Provides native app-like interaction for mobile users This complements the FAB button with a more natural gesture-based interaction pattern commonly found in mobile apps. _Generated with `cmux`_ Change-Id: I8b78d1b9d32056a1b02adde4cd17e17375eecfaa Signed-off-by: Test <test@example.com>
Replace bottom-right FAB with a header button for better accessibility: - Add panel icon button next to terminal button in WorkspaceHeader - Only visible on mobile (max-md breakpoint) - Remove FAB that was blocking chat input area - Keep swipe gestures and backdrop overlay - Expose sidebar open function via callback prop chain The header button is more discoverable and doesn't interfere with other mobile UI elements like the chat input. _Generated with `cmux`_ Change-Id: Ib26964982a9872748bb43041a39f787f12974de1 Signed-off-by: Test <test@example.com>
Prevent the mobile review panel from immediately auto-collapsing after the user taps the new header button: - Track manual expansions to disable hysteresis auto-collapse until the user dismisses the panel - Wire the mobile header button through AIView -> RightSidebar to open in manual mode - Reuse the same close helper across overlay, close button, and swipe gestures - Remove the bottom FAB entirely in favor of the header entrypoint This fixes the flicker where the panel opened and instantly closed on mobile devices. _Generated with `cmux`_ Change-Id: Id6fbe1a850808355c16a88c76bd43958c522f0dd Signed-off-by: Test <test@example.com>
Ensure taps inside the expanded mobile review panel do not register as backdrop clicks: - Forward ref SidebarContainer to measure actual rendered width - Track viewport and sidebar widths to size the backdrop hit area - Limit backdrop click target to the space outside the panel - Keep interior close controls and swipe gestures intact _Generated with `cmux`_ Change-Id: I5817e2a466875325839ca3059d47f43b8ce94ed8 Signed-off-by: Test <test@example.com>
ThomasK33
force-pushed
the
mobile-review
branch
from
36427bd to
427ff9a
Compare
|
@coder/codex Rebased on origin/main. Could you take another look? |
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
203
to
+210
| React.useEffect(() => { | ||
| // Never collapse when Review tab is active - code review needs space | ||
| if (selectedTab === "review") { | ||
| if (showCollapsed) { | ||
| setShowCollapsed(false); | ||
| openSidebarAuto(); | ||
| } | ||
| manualExpandRef.current = false; | ||
| return; |
There was a problem hiding this comment.
The new mobile backdrop and “×” control call closeSidebar(), but the effect immediately reopens the sidebar whenever selectedTab === "review" (the early return at selectedTab === "review" always forces openSidebarAuto() and resets manualExpandRef). As a result, if the user opens the Review tab on a small screen, tapping the backdrop or the close button does nothing—the panel snaps open again unless they first switch back to Costs. This contradicts the new UI affordance for dismissing the panel and traps the Review tab onscreen. Consider respecting a manual close while Review is active or delaying the auto‑open until the tab changes.
Useful? React with 👍 / 👎.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
On mobile devices (screens ≤768px), the right sidebar containing the Review and Costs panels auto-collapses based on chat area width and becomes completely hidden with no way to access it. This makes the code review functionality unavailable on mobile.
Solution
Add a Floating Action Button (FAB) in the bottom-right corner that:
Changes
Testing
Manually tested on mobile viewport:
Screenshots
Before: Right sidebar inaccessible on mobile
After: FAB provides access with smooth slide-in animation
Generated with
cmux