From 11913be49ca372c69851f0a5d862622a8d213e54 Mon Sep 17 00:00:00 2001
From: Derek Ross <derekross@gmail.com>
Date: Fri, 27 Mar 2026 13:47:59 -0400
Subject: [PATCH] Fix scrolling on desktop and mobile

- Fix desktop: use fixed height on .main-content so overflow-y: auto
  creates a proper scroll container (min-height prevented scrolling)
- Fix mobile: override to height: auto and overflow: visible so the
  body handles scrolling naturally
- Fix touch swipe handler blocking vertical scroll by restricting
  swipe detection to left edge zone and raising preventDefault threshold
- Move @import out of :root block (invalid CSS, font may not load)
- Add overflow-wrap/word-break to prevent long URLs causing horizontal scroll
- Add overflow handling for markdown content (pre, code, table, img)
- Add overflow: hidden on top-nav and max-width guard on mobile nav-content
---
 script.js  |  8 ++++++--
 styles.css | 39 +++++++++++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index 4d6b334..9ff19cb 100644
--- a/script.js
+++ b/script.js
@@ -385,11 +385,13 @@ document.addEventListener('DOMContentLoaded', () => {
     let touchEndX = 0;
     let touchEndY = 0;
     let isSwiping = false;
+    const EDGE_ZONE = 30; // px from left edge to trigger swipe
 
     const handleTouchStart = (e) => {
         touchStartX = e.touches[0].clientX;
         touchStartY = e.touches[0].clientY;
-        isSwiping = true;
+        // Only allow swipe gesture from the left edge or when sidebar is open
+        isSwiping = touchStartX < EDGE_ZONE || sidebar.classList.contains('active');
     };
 
     const handleTouchMove = (e) => {
@@ -401,12 +403,14 @@ document.addEventListener('DOMContentLoaded', () => {
         const deltaX = touchStartX - touchEndX;
         const deltaY = Math.abs(touchStartY - touchEndY);
 
+        // If vertical movement dominates, this is a scroll, not a swipe
         if (deltaY > Math.abs(deltaX)) {
             isSwiping = false;
             return;
         }
 
-        if (Math.abs(deltaX) > 10) {
+        // Only prevent default once we're confident this is a horizontal swipe
+        if (Math.abs(deltaX) > 30 && Math.abs(deltaX) > deltaY * 2) {
             e.preventDefault();
         }
     };
diff --git a/styles.css b/styles.css
index f6732ac..390d775 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,6 @@
-:root {
-    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 
+:root {
     --primary-color: #3a0ca3;;
     --background-color: #c8e7ff;
     --text-color: #1a090d;
@@ -37,6 +37,8 @@ body {
     background-color: var(--background-color);
     color: var(--text-color);
     line-height: 1.6;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .container {
@@ -167,8 +169,9 @@ body {
     padding: 2rem;
     padding-top: 80px; /* Increased padding-top to account for fixed nav */
     flex: 1;
-    min-height: 100vh;
-    overflow: auto;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
     margin-top: 0;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
@@ -291,6 +294,9 @@ body {
     .main-content {
         margin-left: 0;
         padding-top: 100px; /* Increase padding-top for mobile to account for wrapped nav elements */
+        height: auto;
+        overflow: visible;
+        overscroll-behavior: auto;
     }
 
     .menu-toggle {
@@ -355,6 +361,8 @@ body {
 .markdown-content {
     padding: 10px;
     line-height: 1.5;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .markdown-content a {
@@ -366,6 +374,27 @@ body {
     text-decoration: underline;
 }
 
+.markdown-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+.markdown-content pre {
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.markdown-content code {
+    overflow-wrap: break-word;
+    word-break: break-all;
+}
+
+.markdown-content table {
+    display: block;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
 /* Update contributors grid styles */
 .contributors-grid {
     display: grid;
@@ -598,6 +627,7 @@ button:focus {
     right: 0;
     z-index: 1001;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
 }
 
 .nav-content {
@@ -660,6 +690,7 @@ button:focus {
         gap: 0.5rem;
         padding: 0.5rem 1rem;
         margin-left: 2.5rem; /* Space for menu toggle */
+        max-width: calc(100% - 2.5rem);
     }
 
     .logo-container {