fix(web-app): resolve hover contrast, sidebar layout shifting, and mobile menu toggle bugs (#1279) - #1348
Merged
steam-bell-92 merged 3 commits intoJun 23, 2026
Conversation
|
@omnipotentchaos is attempting to deploy a commit to the Anuj'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
This PR addresses several front-end UI/UX regressions in the web app (issue #1279), focusing on improving dark-mode contrast, preventing sidebar/content overlap on medium viewports, and fixing mobile navigation behavior and icon loading.
Changes:
- Fixes “Surprise Me” hero button hover contrast in dark mode by updating hover text/icon color.
- Aligns sidebar-aware layout padding breakpoints so medium screens (≥768px) don’t get overlapped by the docked sidebar.
- Prevents scroll-based auto-opening of the sidebar on mobile and adds a manual mobile toggle/close flow, plus fixes FontAwesome link tag syntax/SRI.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| web-app/css/styles.css | Adjusts responsive layout/media-query behavior and hover styling; includes formatting/organization updates. |
| web-app/js/main.js | Updates sidebar observer + adds mobile sidebar toggle/close behaviors and aria-expanded syncing. |
| web-app/index.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/404.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/faq.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/games.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/math.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/privacy-policy.html | Fixes FontAwesome <link> syntax and SRI hash. |
| web-app/utilities.html | Fixes FontAwesome <link> syntax and SRI hash. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+372
to
374
| if (window.innerWidth <= 768) { | ||
| closeMobileSidebar(); | ||
| } |
Comment on lines
+596
to
+598
| if (window.innerWidth <= 768) { | ||
| closeMobileSidebar(); | ||
| } |
Comment on lines
+624
to
+626
| if (window.innerWidth <= 768) { | ||
| closeMobileSidebar(); | ||
| } |
Comment on lines
+649
to
+651
| if (window.innerWidth <= 768) { | ||
| closeMobileSidebar(); | ||
| } |
Comment on lines
742
to
+745
| const checkAndToggleSidebar = () => { | ||
| if (window.innerWidth <= 768) { | ||
| return; | ||
| } |
| } | ||
| } | ||
|
|
||
| @media (max-width: 768px) { |
steam-bell-92
added
type:bug
Contributor
|
🎉 Thank you for your contribution! Your Pull Request has been merged successfully. |
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.
📝 Description
This PR resolves multiple UI and layout bugs reported in issue #1279, improving screen responsiveness, dark mode visibility, and navigation interactions on mobile.
1. "Surprise Me" Button Hover Contrast State
color: #0c0f1a(dark slate) to.btn-secondary-hero:hoverinstyles.css. The text and icon now correctly transition to dark slate against the white hover background.2. Sidebar Dock Layout Overlapping Content on Medium viewports
768pxand1100px, the sidebar docked on the left, but content shifting paddings were set to0by a max-width override, causing the sidebar to overlap the leftmost project cards (like "Coin Flip").styles.cssso that the desktop paddings (296px/128px) apply for all screens>= 768px, while the mobile layout overrides are confined to viewports< 768px(max-width: 767px).3. Mobile Sidebar Drawer Autoloading on Scroll
<= 768px, scrolling past the hero section triggered the scroll observer, automatically sliding in the mobile drawer and displaying the backdrop, blocking user interaction.checkAndToggleSidebarinmain.jsto return early on screens<= 768px, preventing scroll-based automatic triggers on mobile.mobileMenuToggleto togglesidebar-activeand synchronizedaria-expandedattributes.main.jsto automatically close the mobile sidebar drawer after selection.4. Broken Link Tags & FontAwesome Loading Failures
<link>tags in all HTML files closed the tag prematurely and rendered a stray/>character sequence at the top left of the screen.<link>tag syntax errors and updated them to use the correct SHA-512 integrity hashes.🔄 Related Issue
Closes #1279
💻 Environment & Testing