fix: add mobile responsive sidebar drawer and touch-friendly globe co… - #66
Merged
sajeetharan merged 2 commits intoAug 6, 2026
Merged
Conversation
|
@HereIsMuhammad is attempting to deploy a commit to the sajeetharan's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a mobile-friendly interaction model for the leaderboard sidebar (drawer + backdrop) and improves touch handling for the globe to address the mobile responsiveness gaps described in Issue #4.
Changes:
- Introduces a mobile-only header hamburger button to toggle the leaderboard drawer, plus a tap-outside backdrop.
- Updates the leaderboard sidebar to support an “open” state and adds close affordances (drag-handle + close button) for mobile.
- Improves mobile ergonomics with
touch-action: noneon the globe container and adds a 480px breakpoint for tighter header/sidebar sizing.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| styles/main.css | Adds mobile drawer/backdrop styling, touch-action for globe, and a 480px breakpoint for tighter UI on small screens. |
| components/Leaderboard.jsx | Adds open state styling hook and mobile close affordances for the sidebar. |
| components/Header.jsx | Adds a mobile-only sidebar toggle button and wraps button labels for small-screen hiding. |
| app/page.jsx | Adds sidebarOpen state, wires toggle/close behavior, and renders the backdrop overlay. |
Suppressed comments (1)
components/Leaderboard.jsx:130
- This new close button should specify type="button" to avoid acting as a submit button if the sidebar is ever rendered inside a .
<button className="sidebar__close-btn" onClick={onClose} aria-label="Close leaderboard" title="Close leaderboard">
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <aside className="sidebar" id="sidebar"> | ||
| <aside className={`sidebar${open ? ' open' : ''}`} id="sidebar"> | ||
| <div className="sidebar__drag-handle" onClick={onClose} aria-hidden="true" /> |
Comment on lines
+18
to
+21
| onClick={onToggleSidebar} | ||
| aria-label={sidebarOpen ? 'Close leaderboard' : 'Open leaderboard'} | ||
| aria-expanded={sidebarOpen} | ||
| title={sidebarOpen ? 'Close leaderboard' : 'Open leaderboard'} |
| onClose={() => setSidebarOpen(false)} | ||
| /> | ||
| {sidebarOpen && ( | ||
| <div className="sidebar-backdrop" onClick={() => setSidebarOpen(false)} /> |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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
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.
What changed
touch-action: noneon the globe container for more reliable pinch/pan gestures on touch devicesHow I tested it
Syntax-checked all changed files with Babel and a CSS parser (all clean, no duplicate/orphan selectors). Tested manually in browser DevTools responsive mode across breakpoints.
Closes #4