From 56ea9cbcf426215a2e74150c81d9c33781d8e0fc Mon Sep 17 00:00:00 2001
From: Gamosoft <gamosoft@users.noreply.github.com>
Date: Tue, 10 Mar 2026 10:32:55 +0100
Subject: [PATCH] attempt to fix the syntax highlight issue

---
 frontend/index.html | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 40a52d9..fe60654 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -584,11 +584,18 @@
             white-space: pre-wrap;
             word-wrap: break-word;
             overflow-wrap: break-word;
+            word-break: normal; /* Ensure consistent word breaking */
             padding: 1.5rem;
             margin: 0;
             border: none;
             box-sizing: border-box;
         }
+        /* Ensure spans in overlay don't affect word wrapping */
+        .syntax-overlay span {
+            word-break: inherit;
+            overflow-wrap: inherit;
+            white-space: inherit;
+        }
         
         .editor-textarea {
             background-color: var(--bg-primary) !important;
@@ -619,16 +626,26 @@
             position: absolute;
             inset: 0;
             pointer-events: none;
-            overflow: auto;
+            overflow-y: scroll; /* Force scrollbar space to match textarea */
+            overflow-x: hidden;
             color: var(--text-primary);
             background-color: var(--bg-primary);
             z-index: 0;
-            /* Hide scrollbars but allow programmatic scrolling */
-            scrollbar-width: none; /* Firefox */
-            -ms-overflow-style: none; /* IE/Edge */
         }
+        /* Make overlay scrollbar invisible but still take up space */
         .syntax-overlay::-webkit-scrollbar {
-            display: none; /* Chrome/Safari */
+            width: 12px; /* Match textarea scrollbar width */
+            background: transparent;
+        }
+        .syntax-overlay::-webkit-scrollbar-thumb {
+            background: transparent;
+        }
+        /* Firefox: use overlay scrollbar (invisible but takes space) */
+        @supports (scrollbar-width: auto) {
+            .syntax-overlay {
+                scrollbar-width: thin;
+                scrollbar-color: transparent transparent;
+            }
         }
         
         /* Zen Mode Styles */