Skip to content

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

Open
jtemporal wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Prevent code block text overflow on mobile devices #4

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
daf7232
fix: prevent code block text overflow on mobile devices
jtemporal Oct 28, 2025
aad12a7
Remove redundant overflow-x-auto class in both pre and code elements
jtemporal Oct 28, 2025
899e8bd
Creates code block styling classes to avoid code duplication
jtemporal Oct 28, 2025
238a98a
Adjust the rounded class in .code-block-sm
jtemporal Oct 28, 2025
0fa9b03
Update src/styles/globals.css
jtemporal Oct 28, 2025
062c473
Uses rounded insted of rounded-lg for codeblocks
jtemporal Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/pages/apps.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ const heroDescription = `Browse ${totalApps} badge apps. ${preloadedApps.length}
Apps Directory Structure
</h3>

<pre class="bg-background rounded-lg p-6 overflow-x-auto text-sm"><code>{`/Volumes/BADGER/
<pre class="code-block"><code>{`/Volumes/BADGER/
├── apps/
│ ├── badge/
│ │ ├── __init__.py
Expand Down Expand Up @@ -216,7 +216,7 @@ const heroDescription = `Browse ${totalApps} badge apps. ${preloadedApps.length}
<p class="text-sm text-muted-foreground mb-3">
Apps can be launched from the badge menu or inspected directly from the REPL:
</p>
<pre class="bg-background rounded p-3 text-sm"><code>import os
<pre class="code-block-sm"><code>import os
os.listdir('/apps')

# example: run flappy from a REPL session
Expand All @@ -231,7 +231,7 @@ exec(open('/apps/flappy/__init__.py').read())</code></pre>
<p class="text-sm text-muted-foreground mb-3">
Most apps expose straight Python or asset files you can tweak while mounted:
</p>
<pre class="bg-background rounded p-3 text-sm"><code># Edit via USB file access
<pre class="code-block-sm"><code># Edit via USB file access
# example: adjust Monapet UI text
edit('/apps/monapet/ui.py')</code></pre>
</div>
Expand Down
14 changes: 14 additions & 0 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,4 +556,18 @@

.prose .chars--highlighted {
@apply bg-zinc-700/50 dark:bg-zinc-600/50 rounded px-1;
}


.code-block {
@apply bg-background rounded-lg p-6 overflow-x-auto text-sm max-w-full;
Comment thread
jtemporal marked this conversation as resolved.
Outdated
}

.code-block-sm {
@apply bg-background rounded p-3 overflow-x-auto text-sm max-w-full;
}
Comment thread
jtemporal marked this conversation as resolved.

.code-block code,
.code-block-sm code {
@apply block whitespace-pre;
Comment thread
jtemporal marked this conversation as resolved.
Outdated
}