[MODEL] Generated HTML layouts are consistently too narrow for their content

Preflight Checklist

• [x] I have searched existing issues for similar behavior reports
• [x] This report does NOT contain sensitive information (API keys, passwords, etc.)

Type of Behavior Issue

Claude made incorrect assumptions about my project

What You Asked Claude to Do

I asked (originally in Korean): "Make this into an HTML page so it's easier for me to read."
Then: "Save it as an HTML file I can open locally."

The content was a Korean-language analysis report with headings, paragraphs, a callout box, flow cards and tables. This is a typical request for me; I ask Claude Code to turn reports and reviews into HTML pages regularly.

What Claude Actually Did

Claude assumed a narrow reading layout without looking at what the page actually contained, so the page came out narrower than its content needed. This happens almost every time Claude generates HTML for me: text, boxes and tables get squeezed into a narrow column while much of the screen sits empty.

The assumptions in this case:

1. A fixed narrow container. Claude capped the content column at main { max-width: 860px }. That's narrow for a report with five-step flow cards and multi-column tables.
2. A Latin-text line length applied to everything. It also capped every paragraph separately with p { max-width: 68ch }. Paragraphs, and a callout box built as <p class="note">, ended up narrower still, shorter than the cards and tables right below them.
3. That ch works for Korean. ch is the width of the "0" glyph, and a Hangul syllable is roughly twice that wide, so 68ch wraps at about 35–40 characters, in the middle of the screen.

What the generated page looks like at 1440px (X = one Korean character, ≈ 2ch wide):

|<------------------------------ 1440px viewport ------------------------------>|
|                                                                               |
|   unused   |<---------- main { max-width: 860px } ---------->|    unused      |
|   space    |                                                  |    space       |
|            |  Report title                                    |                |
|            |                                                  |                |
|            |  +---------------------------+                   |                |
|            |  | NOTE  XXXXXXXXXXXXXXXXXXX |  <- <p class="note">                |
|            |  | XXXXXXXXXXXXXXXXXXXXXXXXX |     max-width: 68ch                 |
|            |  | XXXXXXXXXXXXX             |     (~38 Korean chars)              |
|            |  +---------------------------+                   |                |
|            |                              ^ box stops here     |                |
|            |                                                  |                |
|            |  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  <- <p> also |                |
|            |  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX     capped   |                |
|            |  XXXXXXXXXXXXXXXXX                      at 68ch  |                |
|            |                                                  |                |
|            |  +------+ +------+ +------+ +------+ +------+     |                |
|            |  | Step | | Step | | Step | | Step | | Step |     |                |
|            |  |  1   | |  2   | |  3   | |  4   | |  5   |     |                |
|            |  +------+ +------+ +------+ +------+ +------+     |                |
|            |  <------- cards use the full 860px ------->       |                |
|            |                                                  |                |
|            |  +----------------------------------------------+|                |
|            |  | Col A | Col B | Col C | Col D | Col E | Col F ||                |
|            |  +----------------------------------------------+|                |

Problems visible above:

• Two column widths on one page. <p> blocks (68ch) are narrower than the cards and tables (860px), so box edges don't line up.
• 68ch is about 38 Korean characters, so Korean lines wrap mid-screen.
• Five-card rows and wide tables are squeezed while about 40% of the viewport sits empty.

Expected Behavior

Claude should size the layout from the content instead of assuming a default:

1. Choose the column width from what the page holds. Wide tables, multi-card rows and diagrams need more room than a short memo.
2. Set that width once, on the content container, so every block on the page shares the same edges.
3. Not cap individual p elements, especially ones styled as boxes (background, border or padding).
4. Check the content language before applying a character-count line length. For Korean text, don't use ch-based limits, which come out about half as wide as intended.

Expected layout at 1440px:

|<------------------------------ 1440px viewport ------------------------------>|
|                                                                               |
|   |<------------- main { max-width: sized to the content } ------------->|   |
|   |                                                                       |   |
|   |  Report title                                                         |   |
|   |                                                                       |   |
|   |  +-----------------------------------------------------------------+  |   |
|   |  | NOTE  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |  |   |
|   |  |       XXXXXXXXXXXXXXXXXXXX                                      |  |   |
|   |  +-----------------------------------------------------------------+  |   |
|   |                                                                       |   |
|   |  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  |   |
|   |  XXXXXXXXXXXXXXXXXXXXXXXXXXX                                         |   |
|   |                                                                       |   |
|   |  +----------+ +----------+ +----------+ +----------+ +----------+   |   |
|   |  |  Step 1  | |  Step 2  | |  Step 3  | |  Step 4  | |  Step 5  |   |   |
|   |  +----------+ +----------+ +----------+ +----------+ +----------+   |   |
|   |                                                                       |   |
|   |  +-----------------------------------------------------------------+  |   |
|   |  |  Col A  |  Col B  |  Col C  |  Col D  |  Col E  |  Col F        |  |   |
|   |  +-----------------------------------------------------------------+  |   |

• One width, set once on the container and chosen from the content.
• Paragraphs and boxes share the same left and right edges as the cards and tables.
• No ch-based cap on Korean text.

Files Affected

Modified (as requested; the problem is only in the generated CSS):
- report.html (Artifact publish)
- report-local.html (standalone copy of the same page)

No files were modified or read outside the requested scope.

Permission Mode

Accept Edits was ON (auto-accepting changes)

Can You Reproduce This?

Sometimes (intermittent)

Steps to Reproduce

1. Ask Claude Code to turn a report with mixed content (paragraphs, a callout box, a row of cards, a table) into an HTML page. Korean content makes it most obvious.
2. Open the page in a desktop browser at a typical width (1440px or wider).
3. The content sits in a narrow column with wide empty margins. Paragraphs and callout boxes are narrower than the cards and tables around them.
4. In the CSS, look for a narrow container max-width plus p { max-width: <N>ch }.

Minimal HTML showing the paragraph/box mismatch (the Korean sample text is needed to show the wrapping):

<main style="max-width:860px;margin:0 auto">
  <!-- Korean sample: "This paragraph is an example showing where Korean text wraps. It is unrelated to any real report." -->
  <p style="max-width:68ch;background:#fdf0dc;padding:10px">
    이 문단은 한글 문장이 어느 폭에서 줄바꿈되는지 보여 주기 위한 예시입니다. 실제 보고서 내용과는 관계가 없습니다.
  </p>
  <div style="background:#eee;padding:10px">This card spans the full 860px column.</div>
</main>

Claude Model

Opus

Relevant Conversation

When I asked why the width kept breaking, Claude identified its own CSS as the cause (translated from Korean):

> "The cause is one line of CSS I added: `p{margin:0;max-width:68ch}`. The yellow note box is a `<p class="note">`, so it inherits this rule, while the cards and panels below are `<div>`s and use the full 860px column. `ch` is the width of the '0' glyph; a Hangul syllable is almost twice as wide, so 68ch actually breaks at about 35–40 Korean characters."

> "This keeps recurring because I follow the 'keep running text near 65 characters' guideline by putting the measure on every `p` instead of once on the column, which gives the page two column widths."

Impact

Medium - Extra work to undo changes

Claude Code Version

2.1.296 (Claude Code)

Platform

Anthropic API

Additional Context

• The main problem: generated HTML is almost always narrower than its content needs, and I have to fix the widths by hand on nearly every page. This happens across many sessions.
• Happens in both the CLI (terminal) and the VS Code extension, so it looks like model behavior, not a client issue.
• The root cause looks like default assumptions applied without checking the content: (1) a conservative fixed container width, and (2) a Latin-text line length applied per paragraph in ch units.
• Most visible with Korean content, where one character is about two ch wide. I haven't tested other languages.
• The likely trigger is the HTML/Artifact design guidance ("keep running text near 65 characters wide"). The model seems to apply it as a hard cap on everything instead of as a reading guideline for long prose.

Suggested fix (guidance level):

• Pick the container width from the content (tables, card rows, diagrams), not from a fixed default.
• Set the width once on the container, not on p.
• Treat the 65-character guideline as applying to long-form prose only, in Latin scripts, and don't express it in ch for Korean text.