Skip to content

Fix CJK (Chinese/Japanese) content overflowing story page layout #686

@realproject7

Description

@realproject7

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)

  • https://plotlink.xyz/story/40 (Chinese) — text wraps within container, sidebar visible
  • https://plotlink.xyz/story/39 (Japanese) — text wraps within container, sidebar visible
  • English stories unaffected — normal wrapping preserved
  • Korean stories unaffected
  • Reading Mode CJK content wraps correctly
  • Mobile view CJK content wraps correctly
  • `npm run build` passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions