From 56ea9cbcf426215a2e74150c81d9c33781d8e0fc Mon Sep 17 00:00:00 2001 From: Gamosoft Date: Tue, 10 Mar 2026 10:32:55 +0100 Subject: [PATCH 1/4] 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 */ From a477f9b169e7d220fc9a51ad0e47596f11575e34 Mon Sep 17 00:00:00 2001 From: Gamosoft Date: Tue, 10 Mar 2026 10:47:51 +0100 Subject: [PATCH 2/4] another try --- frontend/index.html | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index fe60654..f5663ce 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -584,24 +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; color: var(--text-primary) !important; resize: none; - overflow: auto; + overflow-y: scroll; /* Always show scrollbar for consistent text width */ + overflow-x: auto; } /* Syntax Highlighting Overlay */ @@ -626,24 +620,23 @@ position: absolute; inset: 0; pointer-events: none; - overflow-y: scroll; /* Force scrollbar space to match textarea */ + overflow-y: scroll; /* Match textarea scrollbar space */ overflow-x: hidden; color: var(--text-primary); background-color: var(--bg-primary); z-index: 0; } - /* Make overlay scrollbar invisible but still take up space */ + /* Invisible scrollbar that takes same space as textarea */ .syntax-overlay::-webkit-scrollbar { - width: 12px; /* Match textarea scrollbar width */ + width: 12px; background: transparent; } .syntax-overlay::-webkit-scrollbar-thumb { background: transparent; } - /* Firefox: use overlay scrollbar (invisible but takes space) */ - @supports (scrollbar-width: auto) { + /* Firefox */ + @supports (scrollbar-color: auto) { .syntax-overlay { - scrollbar-width: thin; scrollbar-color: transparent transparent; } } From df6f3abf89838d6243e845f306fb244bc1cd16ab Mon Sep 17 00:00:00 2001 From: Gamosoft Date: Tue, 10 Mar 2026 11:36:05 +0100 Subject: [PATCH 3/4] overflow-x --- frontend/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/index.html b/frontend/index.html index f5663ce..c72c5c3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -621,7 +621,7 @@ inset: 0; pointer-events: none; overflow-y: scroll; /* Match textarea scrollbar space */ - overflow-x: hidden; + overflow-x: auto; /* Match textarea for horizontal scroll sync */ color: var(--text-primary); background-color: var(--bg-primary); z-index: 0; From c16b020f22efe9660fb1bda5e727889ec02a5934 Mon Sep 17 00:00:00 2001 From: Gamosoft Date: Wed, 11 Mar 2026 16:26:16 +0100 Subject: [PATCH 4/4] see if this makes it work --- frontend/index.html | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index c72c5c3..7d862f3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -626,19 +626,24 @@ background-color: var(--bg-primary); z-index: 0; } - /* Invisible scrollbar that takes same space as textarea */ + /* Invisible scrollbar that takes EXACT same space as textarea */ .syntax-overlay::-webkit-scrollbar { width: 12px; + height: 12px; background: transparent; } + .syntax-overlay::-webkit-scrollbar-track { + background: var(--bg-tertiary); /* MUST match textarea track */ + } .syntax-overlay::-webkit-scrollbar-thumb { background: transparent; + border-radius: 6px; + border: 2px solid transparent; /* MUST match textarea's 2px border */ } - /* Firefox */ - @supports (scrollbar-color: auto) { - .syntax-overlay { - scrollbar-color: transparent transparent; - } + /* Firefox - MUST match textarea's scrollbar-width: thin */ + .syntax-overlay { + scrollbar-width: thin; + scrollbar-color: transparent var(--bg-tertiary); } /* Zen Mode Styles */