From 8086c57b79141c487db04f3e1088b687a0332047 Mon Sep 17 00:00:00 2001
From: Yana Nesterenko <github@yananesterenko.com>
Date: Sun, 16 Nov 2025 20:38:44 -0500
Subject: [PATCH] fix code flow overflow and add responsive design fix (#3229)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Fixes code block overflow issues by adding proper CSS overflow handling
and responsive design: Code blocks overflow and don't scale properly
#3228

## Changes Made to _base.scss
- Added `overflow-x`: auto to enable horizontal scrolling for long code
lines
- Added `white-space: pre` to preserve code formatting while allowing
horizontal scrolling
- Added `word-wrap: normal` to prevent wrapping of long lines
- Added `-webkit-overflow-scrolling: touch` for smooth iOS scrolling
- Added responsive font sizes for different breakpoints (576px, 400px,
and 768px)
- Applied fixes to `pre`, `code`, and `figure.highlight` elements

## Related Issue
Closes  #3228

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
Co-authored-by: George Araújo <george.gcac@gmail.com>
---
 _sass/_base.scss | 78 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index ea125e2..13a55d1 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -891,6 +891,18 @@ footer.sticky-bottom {
 // Rouge Color Customization
 figure.highlight {
   margin: 0 0 1rem;
+
+  // Responsive code block container
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  pre {
+    // Ensure code blocks can scroll horizontally
+    white-space: pre;
+    word-wrap: normal;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 pre {
@@ -899,6 +911,12 @@ pre {
   border-radius: 6px;
   padding: 6px 12px;
 
+  // Responsive behavior for code blocks
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: pre;
+  word-wrap: normal;
+
   pre,
   code {
     background-color: transparent;
@@ -913,6 +931,10 @@ code {
   background-color: var(--global-code-bg-color);
   border-radius: 3px;
   padding: 3px 3px;
+
+  // Inline code should wrap
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 // Transitioning Themes
@@ -1092,6 +1114,62 @@ nav[data-toggle="toc"] {
     height: 0;
     top: 0;
   }
+
+  /* Responsive code blocks for mobile */
+  pre {
+    font-size: 0.875rem;
+    padding: 8px 10px;
+    margin: 0.5rem 0;
+  }
+
+  figure.highlight {
+    margin: 0.5rem 0;
+
+    pre {
+      font-size: 0.875rem;
+      padding: 8px 10px;
+    }
+  }
+
+  code {
+    font-size: 0.875rem;
+    padding: 2px 4px;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  pre {
+    font-size: 0.8rem;
+    padding: 6px 8px;
+  }
+
+  figure.highlight {
+    pre {
+      font-size: 0.8rem;
+      padding: 6px 8px;
+    }
+  }
+
+  code {
+    font-size: 0.8rem;
+    padding: 1px 3px;
+  }
+}
+
+/* Medium screens - optimize for tablets */
+@media (min-width: 577px) and (max-width: 768px) {
+  pre {
+    font-size: 0.9rem;
+    padding: 8px 12px;
+  }
+
+  figure.highlight {
+    pre {
+      font-size: 0.9rem;
+      padding: 8px 12px;
+    }
+  }
 }
 
 .featured-posts {