Prevent code block text overflow on mobile devices #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

jtemporal wants to merge 6 commits into badger:main from jtemporal:fix-code-block-overflow

jtemporal commented Oct 28, 2025 •

edited

Loading

Add classes to ensure code blocks scroll horizontally instead of overflowing their container, fixing text spilling outside boundaries on mobile and narrow viewports.

before:

now:


          fix: prevent code block text overflow on mobile devices

daf7232

- Add overflow-x-auto and max-w-full classes to pre elements
- Add whitespace-pre and overflow-x-auto classes to code elements
- Ensures code blocks scroll horizontally instead of overflowing container
- Fixes text spilling outside boundaries on mobile/narrow viewports

Copilot AI review requested due to automatic review settings

October 28, 2025 11:39

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

This PR fixes code block text overflow issues on mobile and narrow viewports by adding horizontal scrolling classes to three code blocks on the apps page.

Added max-w-full and overflow-x-auto to <pre> elements
Added block, whitespace-pre, and overflow-x-auto to <code> elements
Ensures code blocks scroll horizontally instead of breaking layout boundaries

src/pages/apps.astro Outdated Show resolved Hide resolved

src/pages/apps.astro Outdated Show resolved Hide resolved

src/pages/apps.astro Outdated Show resolved Hide resolved


          Remove redundant overflow-x-auto class in both pre and code elements

aad12a7

jtemporal requested a review from Copilot

October 28, 2025 11:48

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

src/pages/apps.astro Outdated Show resolved Hide resolved


          Creates code block styling classes to avoid code duplication

899e8bd

jtemporal requested a review from Copilot

October 28, 2025 11:59

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

src/styles/globals.css Show resolved Hide resolved


          Adjust the rounded class in .code-block-sm

238a98a

jtemporal requested a review from Copilot

October 28, 2025 12:03

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

src/styles/globals.css Outdated Show resolved Hide resolved


          Update src/styles/globals.css

0fa9b03

Co-authored-by: Copilot <[email protected]>

jtemporal requested a review from Copilot

October 28, 2025 12:07

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

src/styles/globals.css Outdated Show resolved Hide resolved


          Uses rounded insted of rounded-lg for codeblocks

062c473

jtemporal requested a review from Copilot

October 28, 2025 12:13

Copilot AI reviewed

View reviewed changes

Copilot AI left a comment

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet