Bug
Chinese and Japanese story content overflows the ruled-paper container on desktop, pushing the sidebar (Price, Trade, Donate) off-screen. Other languages (English, Korean, etc.) display correctly.
Repro: Visit https://plotlink.xyz/story/40 (Chinese) or https://plotlink.xyz/story/39 (Japanese) on desktop.
Root Cause
CJK (Chinese/Japanese/Korean) text has no spaces between characters. While CSS normally auto-breaks CJK text between characters, the `.ruled-paper` and `.story-markdown` containers in `globals.css` have no explicit `word-break` or `overflow-wrap` properties set. Long CJK sentences — especially with punctuation like `,` `。` `;` — can prevent line breaks, causing text to overflow the container width.
Fix
Add CJK-safe word breaking to the ruled-paper and story-markdown containers in `src/app/globals.css`:
```css
.ruled-paper {
overflow-wrap: break-word;
word-break: break-word;
}
```
`word-break: break-word` is the correct property — it breaks CJK text naturally between characters and also breaks long Latin words if needed. Do NOT use `break-all` as it breaks Latin text mid-word unnecessarily.
Also add `overflow: hidden` or `overflow-x: hidden` to the ruled-paper container as a safety net to prevent any residual overflow from affecting the page layout.
Files to modify
- `src/app/globals.css` — add word-break + overflow-wrap to `.ruled-paper`
Branch
`task/686-cjk-overflow`
Self-Verification (T3)
Bug
Chinese and Japanese story content overflows the ruled-paper container on desktop, pushing the sidebar (Price, Trade, Donate) off-screen. Other languages (English, Korean, etc.) display correctly.
Repro: Visit https://plotlink.xyz/story/40 (Chinese) or https://plotlink.xyz/story/39 (Japanese) on desktop.
Root Cause
CJK (Chinese/Japanese/Korean) text has no spaces between characters. While CSS normally auto-breaks CJK text between characters, the `.ruled-paper` and `.story-markdown` containers in `globals.css` have no explicit `word-break` or `overflow-wrap` properties set. Long CJK sentences — especially with punctuation like `,` `。` `;` — can prevent line breaks, causing text to overflow the container width.
Fix
Add CJK-safe word breaking to the ruled-paper and story-markdown containers in `src/app/globals.css`:
```css
.ruled-paper {
overflow-wrap: break-word;
word-break: break-word;
}
```
`word-break: break-word` is the correct property — it breaks CJK text naturally between characters and also breaks long Latin words if needed. Do NOT use `break-all` as it breaks Latin text mid-word unnecessarily.
Also add `overflow: hidden` or `overflow-x: hidden` to the ruled-paper container as a safety net to prevent any residual overflow from affecting the page layout.
Files to modify
Branch
`task/686-cjk-overflow`
Self-Verification (T3)