Polish responsive article images and overflow #261

Merged

erik merged 1 commit from feat/task-cb862b58-article-image-polish into main

2026-07-16 20:53:29 -05:00

erik commented

2026-07-16 20:47:46 -05:00

Owner

Summary

Article Markdown images now remain centered and contained within the sidebar-based article column while preserving intrinsic aspect ratios and existing preview metadata.

Task

Task: task-cb862b58

Changes

Apply the same centered, responsive styling to first and later Markdown images.
Preserve image aspect ratios without cropping or stretching.
Add controlled small and wide image fixtures.
Cover image containment, centering, aspect ratio, and overflow in light and dark modes at mobile, tablet, and desktop widths.
Preserve canonical and social-preview metadata coverage.

Testing

Unit tests added/updated
npm run test:visual
./scripts/pre-pr.sh

Checklist

./scripts/pre-pr.sh passes
Documentation updated (not needed)
No unrelated changes included

## Summary Article Markdown images now remain centered and contained within the sidebar-based article column while preserving intrinsic aspect ratios and existing preview metadata. ## Task Task: task-cb862b58 ## Changes - Apply the same centered, responsive styling to first and later Markdown images. - Preserve image aspect ratios without cropping or stretching. - Add controlled small and wide image fixtures. - Cover image containment, centering, aspect ratio, and overflow in light and dark modes at mobile, tablet, and desktop widths. - Preserve canonical and social-preview metadata coverage. ## Testing - [x] Unit tests added/updated - [x] `npm run test:visual` - [x] `./scripts/pre-pr.sh` ## Checklist - [x] `./scripts/pre-pr.sh` passes - [x] Documentation updated (not needed) - [x] No unrelated changes included

erik added 1 commit

2026-07-16 20:47:46 -05:00

feat: polish inline article images

CI / build-lint-test (pull_request) Successful in 2m12s

Details

35f46d5a6a

Task: #task-cb862b58

erik commented

2026-07-16 20:50:55 -05:00

Author

Owner

Review summary

The PR makes a small shared styling change and adds focused unit and browser coverage demonstrating that first and later Markdown images remain centered, contained, and aspect-ratio-safe within the sidebar-based article layout.

Acceptance criteria

Met: Browser geometry checks keep both small and wide images within the article content bounds at desktop width.
Met: Rendered image ratios are compared with intrinsic ratios, and responsive max-width/auto-height styling avoids cropping and stretching.
Met: The small fixture image is explicitly checked against the article-column center.
Met: First and later images share the same prose-image styling and are both exercised in unit and browser tests.
Met: Existing mobile article padding remains unchanged, with mobile visual coverage confirming contained images and no overflow.
Met: Existing long-title and multi-tag coverage remains in the responsive suite, while new image checks verify no overflow at mobile, tablet, and desktop widths.
Met: Exact canonical and social-preview assertions remain passing with the first image still selected for preview metadata.
Met: Unit tests cover first and later images; existing no-image coverage remains, and controlled small/wide fixtures cover differing dimensions.
Met: Image behavior is exercised in light and dark modes at mobile and desktop widths, with tablet coverage included.

Blocking issues

None.

Warnings

None.

Verdict

Approved. CI passed for commit 35f46d5a6a, and all nine acceptance criteria are evidenced by the implementation and tests.

### Review summary The PR makes a small shared styling change and adds focused unit and browser coverage demonstrating that first and later Markdown images remain centered, contained, and aspect-ratio-safe within the sidebar-based article layout. ### Acceptance criteria - **Met:** Browser geometry checks keep both small and wide images within the article content bounds at desktop width. - **Met:** Rendered image ratios are compared with intrinsic ratios, and responsive max-width/auto-height styling avoids cropping and stretching. - **Met:** The small fixture image is explicitly checked against the article-column center. - **Met:** First and later images share the same prose-image styling and are both exercised in unit and browser tests. - **Met:** Existing mobile article padding remains unchanged, with mobile visual coverage confirming contained images and no overflow. - **Met:** Existing long-title and multi-tag coverage remains in the responsive suite, while new image checks verify no overflow at mobile, tablet, and desktop widths. - **Met:** Exact canonical and social-preview assertions remain passing with the first image still selected for preview metadata. - **Met:** Unit tests cover first and later images; existing no-image coverage remains, and controlled small/wide fixtures cover differing dimensions. - **Met:** Image behavior is exercised in light and dark modes at mobile and desktop widths, with tablet coverage included. ### Blocking issues - None. ### Warnings - None. ### Verdict **Approved.** CI passed for commit `35f46d5a6a`, and all nine acceptance criteria are evidenced by the implementation and tests.

erik merged commit 83843e7e67 into main

2026-07-16 20:53:29 -05:00

erik deleted branch feat/task-cb862b58-article-image-polish

2026-07-16 20:53:29 -05:00

erik referenced this pull request from a commit

2026-07-16 20:53:30 -05:00

Merge pull request 'Polish responsive article images and overflow' (#261) from feat/task-cb862b58-article-image-polish into main