[MehranMarxian]

Requested by Mehran · project thread

Before: on a 390 px phone, "Making OpenLayer" (PStoComfy2026.html) was about 700 px wide. The page scrolled sideways, and the tag line, the three-rules cards and the "What it does" list ran off the right edge.

After: the page fits the screen. The three-rules cards stack one per row and the feature list is a single column on phones. Desktop is unchanged: full-page screenshots before and after are byte-identical.

Why it happened: the article is a CSS grid with an automatic column, which grows to fit its widest child. Inside it, the features and pipeline lists are grids with fixed 190/210 px minimum tracks, so the column stretched to fit several tracks side by side.

How:

• css/site.css gives .blog-article a minmax(0, 1fr) column.
• PStoComfy2026.html gives its two lists width: 100% and min(100%, …) track minimums, the same pattern .gallery already uses.
• Backlog item 4 in docs/SITE-OVERVIEW.md is marked fixed, and there's a new CHANGELOG.md line.

How it was tested

• Headless Chromium at 1440×900 and 390×844, against a local server.
• Horizontal overflow on PStoComfy2026.html at 390 px went from 312 px to 0.
• The other two pages that use .blog-article (archive/blog-1.html, archive/pstocomfyui3.html) look the same before and after, at both widths.
• No console errors on any of the three pages.
• Mobile screenshots show the header and tag line fitting, and the three-rules cards stacked cleanly.

Risks and follow-ups

• The shared site.css change only affects .blog-article, which is used by the three pages above.
• I couldn't test on a real iPhone. It's worth a quick look on your SE after merging.

Suggestions

1. The PR checks in Add PR checks for links, HTML validity and phone/desktop rendering #7 catch sideways scrolling at 390 px on every page automatically.