From 795b0dedb058ac748142602e10f377585703c835 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Sun, 26 May 2024 15:11:13 -0500
Subject: [PATCH] Improve inline code wrapping on mobile viewports, fix weird
 overflow issue with codeblocks

---
 src/styles/code.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/styles/code.scss b/src/styles/code.scss
index 8e8d1c2..1ca3d33 100644
--- a/src/styles/code.scss
+++ b/src/styles/code.scss
@@ -22,7 +22,12 @@ h6 {
     padding: 0.1rem 0.27rem;
     border-radius: 3px;
     border: 1px solid rgba(white, 0.4);
-    white-space: nowrap;
+    
+    // On really small viewports, word wrapping can be pretty bad with monospaced codeblocks; this allows them to wrap with impunity.
+    word-break: break-all;
+    @screen sm {
+      white-space: nowrap;
+    }
   }
 }
 
@@ -49,6 +54,7 @@ div[data-rehype-pretty-code-fragment] {
   background-color: #161616 !important;
   > pre {
     > code {
+      overflow-x: auto;
       padding: 0.5em 0;
       
       > span[data-line] {