Skip to content

fix(web): hide mobile sidebar after thread selection or creation#1293

Open
murataslan1 wants to merge 1 commit intopingdotgg:mainfrom
murataslan1:fix/mobile-sidebar-auto-close
Open

fix(web): hide mobile sidebar after thread selection or creation#1293
murataslan1 wants to merge 1 commit intopingdotgg:mainfrom
murataslan1:fix/mobile-sidebar-auto-close

Conversation

@murataslan1
Copy link

@murataslan1 murataslan1 commented Mar 22, 2026

Summary

On narrow viewports, the sidebar stayed open after selecting or creating a thread, obscuring the thread content.

Fix

Close the mobile sidebar automatically when:

  • Clicking an existing thread (plain click)
  • Pressing Enter/Space on a thread row (keyboard nav)
  • Clicking the "New Thread" button

Desktop behavior is unchanged — uses isMobile from useSidebar() to gate the behavior.

Test plan

  • Open t3code on a narrow viewport (< 640px or mobile device)
  • Select a thread from the sidebar — sidebar should close
  • Click "New Thread" — sidebar should close
  • On desktop, verify sidebar stays open as before

Fixes #1258

Note

Close mobile sidebar on thread selection or creation

In Sidebar.tsx, setOpenMobile(false) is called when isMobile is true in three places: plain-click thread navigation, keyboard (Enter/Space) thread activation, and new thread creation from a project action button.

Macroscope summarized c893513.

On narrow viewports, the sidebar stayed open after selecting or
creating a thread, obscuring the thread content. Now the sidebar
closes automatically on mobile when:

- Clicking an existing thread
- Pressing Enter/Space on a thread row
- Clicking the "New Thread" button

Desktop behavior is unchanged.

Fixes pingdotgg#1258
Copilot AI review requested due to automatic review settings March 22, 2026 00:12
@coderabbitai
Copy link

coderabbitai bot commented Mar 22, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e7114fe3-46e3-4418-9e9b-62e2c4a9633e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 22, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a mobile UX issue in the web app where the off-canvas thread sidebar remained open after selecting or creating a thread, obscuring the main thread content on narrow viewports.

Changes:

  • Close the mobile sidebar on plain thread selection (mouse click).
  • Close the mobile sidebar on keyboard activation of a thread row (Enter/Space).
  • Close the mobile sidebar when clicking “New Thread”.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +849 to +851
if (isMobile) {
setOpenMobile(false);
}
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The nearby comment describing the plain-click behavior doesn’t mention that we now also close the mobile sidebar. Please update the comment so it remains accurate.

Copilot uses AI. Check for mistakes.
Comment on lines 1503 to +1507
}
setSelectionAnchor(thread.id);
if (isMobile) {
setOpenMobile(false);
}
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Enter/Space handler duplicates the same “activate thread” steps as the click path (clear selection, set anchor, close mobile sidebar, navigate). Consider extracting a shared helper and calling it from both handlers to prevent the two paths drifting over time.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Hide mobile sidebar after creating or selecting a thread

2 participants