A global wrapping rule lets narrow table columns break words in the middle.
+layout.svelte:441-443 sets main { overflow-wrap: anywhere }. Unlike break-word, that lets cells shrink below a word's width.
On phones the Leaderboard's Rank column is 36 px wide (leaderboard/+page.svelte:1051), so its header reads "Ra / nk".
Screenshots
Before, Leaderboard at 390 px:
After (mockup):
Fix
Use overflow-wrap: break-word on main, and keep anywhere only for IDs and paths
A global wrapping rule lets narrow table columns break words in the middle.
- `+layout.svelte:441-443` sets `main { overflow-wrap: anywhere }`. Unlike `break-word`, that lets cells shrink below a word's width.
- On phones the Leaderboard's Rank column is 36 px wide (`leaderboard/+page.svelte:1051`), so its header reads "Ra / nk".
**Screenshots**
Before, Leaderboard at 390 px:
After (mockup):
**Fix**
- Use `overflow-wrap: break-word` on `main`, and keep `anywhere` only for IDs and paths
Reviewed 253d47300c. The fix is done, so I'm closing this.
Checklist
break-word on main, anywhere for IDs and paths.
+layout.svelte:444 now sets overflow-wrap: break-word.
IDs and paths already set anywhere themselves (for example CopyValue.svelte:40 and ServerIdentity.svelte:26, in 58 files in all).
At 390 px, the Leaderboard's Rank header now renders on one line at 52 px. With the old rule injected, it splits over two lines at 44 px.
Review notes
To look for regressions, I loaded 31 pages (23 list pages and the first detail page of 8 of them) at 390 px and 768 px, once as committed and once with the old anywhere rule injected on main. No page overflows more horizontally with the new rule.
Reviewed 253d47300cca250e867248695f3729151479a170. The fix is done, so I'm closing this.
**Checklist**
- [x] **`break-word` on `main`, `anywhere` for IDs and paths.**
- `+layout.svelte:444` now sets `overflow-wrap: break-word`.
- IDs and paths already set `anywhere` themselves (for example `CopyValue.svelte:40` and `ServerIdentity.svelte:26`, in 58 files in all).
- At 390 px, the Leaderboard's Rank header now renders on one line at 52 px. With the old rule injected, it splits over two lines at 44 px.
**Review notes**
- To look for regressions, I loaded 31 pages (23 list pages and the first detail page of 8 of them) at 390 px and 768 px, once as committed and once with the old `anywhere` rule injected on `main`. No page overflows more horizontally with the new rule.
- [Run 861](https://gitea.thewrightserver.net/josh/electric-cherry/actions/runs/861) passed on this commit.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
A global wrapping rule lets narrow table columns break words in the middle.
+layout.svelte:441-443setsmain { overflow-wrap: anywhere }. Unlikebreak-word, that lets cells shrink below a word's width.leaderboard/+page.svelte:1051), so its header reads "Ra / nk".Screenshots
Before, Leaderboard at 390 px:
After (mockup):
Fix
overflow-wrap: break-wordonmain, and keepanywhereonly for IDs and pathsReviewed
253d47300c. The fix is done, so I'm closing this.Checklist
break-wordonmain,anywherefor IDs and paths.+layout.svelte:444now setsoverflow-wrap: break-word.anywherethemselves (for exampleCopyValue.svelte:40andServerIdentity.svelte:26, in 58 files in all).Review notes
anywhererule injected onmain. No page overflows more horizontally with the new rule.