Fix mobile code overflow and light/dark mode color variables#10
Merged
HelgeSverre merged 4 commits intomainfrom Dec 26, 2025
Merged
Fix mobile code overflow and light/dark mode color variables#10HelgeSverre merged 4 commits intomainfrom
HelgeSverre merged 4 commits intomainfrom
Conversation
Co-authored-by: HelgeSverre <1089652+HelgeSverre@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix screen overflow in quick start section for mobile
Fix horizontal scroll overflow in Quick Start code blocks on mobile
Dec 23, 2025
HelgeSverre
requested changes
Dec 23, 2025
Owner
HelgeSverre
left a comment
There was a problem hiding this comment.
Light mode looks off, make sure lightmode and darkmode cllors are all using variables
Co-authored-by: HelgeSverre <1089652+HelgeSverre@users.noreply.github.com>
Contributor
Author
Fixed in c613ece. Replaced hardcoded colors with CSS variables:
Both light and dark modes now properly use their respective color values from the CSS variable system.
|
Copilot
AI
changed the title
Fix horizontal scroll overflow in Quick Start code blocks on mobile
Fix mobile code overflow and light/dark mode color variables
Dec 23, 2025
- Add theme toggle button with sun/moon icons in nav - Add JavaScript for theme persistence via localStorage - Fix light mode: nav background, alignment, button colors - Change CSS from media query to data-theme attribute
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
Code snippets in the Quick Start section caused horizontal scrolling on mobile viewports due to long URLs and commands that wouldn't wrap. Additionally, some hardcoded colors weren't adapting properly between light and dark modes.
Changes
white-space: pre-wrapallows line breaks at appropriate pointsword-break: break-wordforces breaks for long unbreakable strings (URLs, paths).code-block preand.code-block codeelements.sh-comment: Changedcolor: #3d6a47tocolor: var(--syn-comment).copy-btn.copied: Changedcolor: #0a0a0atocolor: var(--color-bg)Screenshots
Mobile view (375px width) - Dark mode:
Mobile view (375px width) - Light mode:
Code now wraps properly without horizontal scrollbars. Long URLs like
https://github.com/helgesverre/sql-splitter.gitbreak appropriately. Colors properly adapt between light and dark modes.Checklist
cargo test)cargo fmt)cargo clippy)Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.