From daf723268a90521f81533d4e2a352bf3331075b4 Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jessicatemporal@gmail.com>
Date: Tue, 28 Oct 2025 04:39:12 -0700
Subject: [PATCH 1/6] fix: prevent code block text overflow on mobile devices

- 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
---
 src/pages/apps.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/apps.astro b/src/pages/apps.astro
index 715e302..db39f58 100644
--- a/src/pages/apps.astro
+++ b/src/pages/apps.astro
@@ -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="bg-background rounded-lg p-6 overflow-x-auto text-sm max-w-full"><code class="block whitespace-pre overflow-x-auto">{`/Volumes/BADGER/
 ├── apps/
 │   ├── badge/
 │   │   ├── __init__.py
@@ -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="bg-background rounded p-3 text-sm overflow-x-auto max-w-full"><code class="block whitespace-pre overflow-x-auto">import os
 os.listdir('/apps')
 
 # example: run flappy from a REPL session
@@ -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="bg-background rounded p-3 text-sm overflow-x-auto max-w-full"><code class="block whitespace-pre overflow-x-auto"># Edit via USB file access
 # example: adjust Monapet UI text
 edit('/apps/monapet/ui.py')</code></pre>
           </div>

From aad12a7b842f4c3f04504708065c3e026a9894d5 Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jessicatemporal@gmail.com>
Date: Tue, 28 Oct 2025 04:47:20 -0700
Subject: [PATCH 2/6] Remove redundant overflow-x-auto class in both pre and
 code elements

---
 src/pages/apps.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/apps.astro b/src/pages/apps.astro
index db39f58..968721c 100644
--- a/src/pages/apps.astro
+++ b/src/pages/apps.astro
@@ -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 max-w-full"><code class="block whitespace-pre overflow-x-auto">{`/Volumes/BADGER/
+          <pre class="bg-background rounded-lg p-6 overflow-x-auto text-sm max-w-full"><code class="block whitespace-pre">{`/Volumes/BADGER/
 ├── apps/
 │   ├── badge/
 │   │   ├── __init__.py
@@ -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 overflow-x-auto max-w-full"><code class="block whitespace-pre overflow-x-auto">import os
+            <pre class="bg-background rounded p-3 text-sm overflow-x-auto max-w-full"><code class="block whitespace-pre">import os
 os.listdir('/apps')
 
 # example: run flappy from a REPL session
@@ -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 overflow-x-auto max-w-full"><code class="block whitespace-pre overflow-x-auto"># Edit via USB file access
+            <pre class="bg-background rounded p-3 text-sm overflow-x-auto max-w-full"><code class="block whitespace-pre"># Edit via USB file access
 # example: adjust Monapet UI text
 edit('/apps/monapet/ui.py')</code></pre>
           </div>

From 899e8bdf74058db29d9ba0761c272509473b9c62 Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jessicatemporal@gmail.com>
Date: Tue, 28 Oct 2025 04:58:37 -0700
Subject: [PATCH 3/6] Creates code block styling classes to avoid code
 duplication

---
 src/pages/apps.astro   |  6 +++---
 src/styles/globals.css | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/apps.astro b/src/pages/apps.astro
index 968721c..27e0cc3 100644
--- a/src/pages/apps.astro
+++ b/src/pages/apps.astro
@@ -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 max-w-full"><code class="block whitespace-pre">{`/Volumes/BADGER/
+          <pre class="code-block"><code>{`/Volumes/BADGER/
 ├── apps/
 │   ├── badge/
 │   │   ├── __init__.py
@@ -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 overflow-x-auto max-w-full"><code class="block whitespace-pre">import os
+            <pre class="code-block-sm"><code>import os
 os.listdir('/apps')
 
 # example: run flappy from a REPL session
@@ -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 overflow-x-auto max-w-full"><code class="block whitespace-pre"># 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>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cbb3e1f..a59143e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -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;
+}
+
+.code-block-sm {
+  @apply bg-background rounded p-3 overflow-x-auto text-sm max-w-full;
+}
+
+.code-block code,
+.code-block-sm code {
+  @apply block whitespace-pre;
 }
\ No newline at end of file

From 238a98ae5d4614d82b14468c443f730050243a26 Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jessicatemporal@gmail.com>
Date: Tue, 28 Oct 2025 05:03:11 -0700
Subject: [PATCH 4/6] Adjust the rounded class in .code-block-sm

---
 src/styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index a59143e..d72f0d7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -564,7 +564,7 @@
 }
 
 .code-block-sm {
-  @apply bg-background rounded p-3 overflow-x-auto text-sm max-w-full;
+  @apply bg-background rounded-lg p-3 overflow-x-auto text-sm max-w-full;
 }
 
 .code-block code,

From 0fa9b0351dacc9c9dfc7a69bafa04eeb54b6357c Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jtemporal@users.noreply.github.com>
Date: Tue, 28 Oct 2025 05:06:48 -0700
Subject: [PATCH 5/6] Update src/styles/globals.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index d72f0d7..99e9dfe 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -569,5 +569,5 @@
 
 .code-block code,
 .code-block-sm code {
-  @apply block whitespace-pre;
+  @apply block whitespace-pre-wrap font-mono;
 }
\ No newline at end of file

From 062c473c63e9fcd5ecea4ae22d0cca2fc125b03a Mon Sep 17 00:00:00 2001
From: Jessica Temporal <jessicatemporal@gmail.com>
Date: Tue, 28 Oct 2025 05:12:05 -0700
Subject: [PATCH 6/6] Uses rounded insted of rounded-lg for codeblocks

---
 src/styles/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 99e9dfe..735df8e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -560,11 +560,11 @@
 
 
 .code-block {
-  @apply bg-background rounded-lg p-6 overflow-x-auto text-sm max-w-full;
+  @apply bg-background rounded p-6 overflow-x-auto text-sm max-w-full;
 }
 
 .code-block-sm {
-  @apply bg-background rounded-lg p-3 overflow-x-auto text-sm max-w-full;
+  @apply bg-background rounded p-3 overflow-x-auto text-sm max-w-full;
 }
 
 .code-block code,