Wrap: break long words, no horizontal scroll while wrap enabled #155

Merged
fen merged 1 commits from fix-152 into dev 2026-09-10 13:51:28 +00:00
Collaborator

Fixes #152.

  • With wrap ON, the paste codebody (and editor) now use overflow-wrap: anywhere + word-break: break-all with overflow-x: hidden, so long unbroken tokens are cut mid-word and wrapped and no horizontal scrolling is possible (verified at 1400x900 and 375x812).
  • The .code container and mobile .float also get overflow-x: hidden while wrap is on.
  • Mobile topbar tightened (gap/padding/nav link padding) so the topbar no longer overflows at 375px, which was the remaining source of document-level horizontal scroll.
  • Wrap OFF keeps white-space: pre with horizontal scroll on the code container, unchanged.

Verified with headless chromium against a local build: wrap ON token spans multiple rendered line boxes and document scrollWidth == clientWidth at both viewports; wrap OFF still scrolls horizontally.

Fixes #152. - With wrap ON, the paste codebody (and editor) now use `overflow-wrap: anywhere` + `word-break: break-all` with `overflow-x: hidden`, so long unbroken tokens are cut mid-word and wrapped and no horizontal scrolling is possible (verified at 1400x900 and 375x812). - The `.code` container and mobile `.float` also get `overflow-x: hidden` while wrap is on. - Mobile topbar tightened (gap/padding/nav link padding) so the topbar no longer overflows at 375px, which was the remaining source of document-level horizontal scroll. - Wrap OFF keeps `white-space: pre` with horizontal scroll on the code container, unchanged. Verified with headless chromium against a local build: wrap ON token spans multiple rendered line boxes and document scrollWidth == clientWidth at both viewports; wrap OFF still scrolls horizontally.
fen added 1 commit 2026-09-10 13:51:15 +00:00
Wrap ON breaks long tokens mid-word; no horizontal scroll while wrap enabled (#152)
CI / docker (pull_request) Skipped
CI / test (pull_request) Successful in 30s
b30d41b87d
- 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
fen force-pushed fix-152 from 1cd2e4e97c to b30d41b87d 2026-09-10 13:51:15 +00:00 Compare
fen merged commit fc07d8b9d7 into dev 2026-09-10 13:51:28 +00:00
Sign in to join this conversation.