From 1cd2e4e97c47a8a3fcd1f32b1db63dc230707d67 Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Thu, 10 Sep 2026 08:43:31 -0500
Subject: [PATCH] Wrap ON breaks long tokens mid-word; no horizontal scroll
 while wrap enabled (#152)

- codebody/editor: overflow-wrap anywhere + word-break break-all + overflow-x hidden under html[data-wrap]
- code container and mobile .float also hidden overflow with wrap on
- topbar mobile: tighten gap/padding/nav link padding so nothing overflows at 375px

Fixes #152
---
 internal/web/static/app.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index bdae956..88e9b0a 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -263,8 +263,12 @@ body {
 /* #130: line wrap toggle, accent when active like other toggles */
 .iconbtn.wrap-toggle[aria-pressed="true"],
 .btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
-html[data-wrap] .codebody { white-space: pre-wrap; }
-html[data-wrap] .editor { white-space: pre-wrap; }
+/* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */
+html[data-wrap] .codebody { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
+html[data-wrap] .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
+/* #152: with wrap on nothing may scroll horizontally, including the code container and mobile floats */
+html[data-wrap] .code { overflow-x: hidden; }
+html[data-wrap] .float { overflow-x: hidden; }
 .iconbtn.danger:hover { color: #ff8fa3; border-color: #ff8fa3; }
 .code-head {
   display: flex; align-items: center; gap: 10px; padding: 8px 16px;
@@ -520,11 +524,11 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
   body { font-size: 16px; }
 
   /* topbar: tighten so logo + nav + gear fit */
-  .topbar { gap: 10px; padding: 0 12px; height: 56px; }
+  .topbar { gap: 6px; padding: 0 10px; height: 56px; }
   .logo { font-size: 17px; white-space: nowrap; }
   .logo em { display: none; }
   .topbar nav { gap: 2px; flex-shrink: 0; }
-  .topbar nav a { padding: 5px 8px; font-size: 15px; }
+  .topbar nav a { padding: 4px 6px; font-size: 15px; }
   .iconbtn.gear { padding: 4px 7px; flex-shrink: 0; }
   .iconbtn.gear svg { width: 18px; height: 18px; }
   .iconbtn.dark-toggle { padding: 4px 7px; flex-shrink: 0; }