diff --git a/news/posts/2025-09-01-GSoC-Report-DoodleBUGS/index.qmd b/news/posts/2025-09-01-GSoC-Report-DoodleBUGS/index.qmd
index 644c42362..b17721d42 100644
--- a/news/posts/2025-09-01-GSoC-Report-DoodleBUGS/index.qmd
+++ b/news/posts/2025-09-01-GSoC-Report-DoodleBUGS/index.qmd
@@ -31,7 +31,7 @@ nocite: |
 
 ## DoodleBUGS Project Structure
 
-```{.bash}
+```{.bash .code-overflow-scroll filename="Directory Structure"}
 DoodleBUGS/                # Vite + Vue 3 app (UI editor)
 ├── README.md              # project documentation
 ├── public/                # static assets served by Vite
@@ -197,7 +197,7 @@ Key differences:
 
 Frontend (Vite):
 
-```bash
+```{.bash}
 # from repo root
 cd DoodleBUGS
 npm install
@@ -206,7 +206,7 @@ npm run dev
 
 Backend (Julia):
 
-```bash
+```{.bash .code-overflow-scroll}
 # from repo root
 julia --project=DoodleBUGS/runtime DoodleBUGS/runtime/server.jl
 # server listens on http://localhost:8081
diff --git a/theming/rules/_responsive.scss b/theming/rules/_responsive.scss
index b6f8b13c6..588b00838 100644
--- a/theming/rules/_responsive.scss
+++ b/theming/rules/_responsive.scss
@@ -1,3 +1,9 @@
+code {
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
 @media (max-width: 1200px) {
     .core-packages-grid {
         grid-template-columns: repeat(2, 1fr);
@@ -60,6 +66,7 @@
         display: block;
         margin-top: 0.3rem;
         text-align: center;
+
         .button {
             display: inline-block;
             width: auto;
@@ -136,6 +143,7 @@
                 justify-content: center;
             }
         }
+
         .partner-logo {
             flex-basis: auto;
             width: 100%;
@@ -148,4 +156,4 @@
             align-items: center;
         }
     }
-}
+}
\ No newline at end of file