fix: use container queries for MediaBlock responsive sizing#1113
Open
claude[bot] wants to merge 8 commits into
Open
fix: use container queries for MediaBlock responsive sizing#1113claude[bot] wants to merge 8 commits into
claude[bot] wants to merge 8 commits into
Conversation
Switch MediaBlock from viewport-based breakpoints (md:, lg:) to CSS container query breakpoints (@sm:, @lg:) so responsive image sizing adapts to the parent container width instead of the viewport. This fixes incorrect sizing when MediaBlock is embedded in narrower containers like the blog post layout (max-w-[48rem]). Also update InlineMediaBlock sizes attribute to use conservative container-relative pixel estimates instead of viewport-relative vw units. Changes: - MediaBlock: Add @container to wrapper div, use @sm:/@lg: container query classes instead of md:/lg: viewport breakpoints - MediaBlock: Remove unused cssVariables import - InlineMediaBlock: Replace vw-based sizes hints with container-aware pixel estimates Closes #757 Co-authored-by: Rachel Fryan <rchlfryn@users.noreply.github.com>
Contributor
|
Preview deployment: https://claudexissue-757-20260611-2132.preview.avy-fx.org |
…hint Switch from fixed breakpoint caps to container-relative `cqw` widths (with a px floor) so each image size stays visually distinct in any container — full-width, blog body, or a narrow grid column. Derive the `sizes` attribute from the same formula and thread column context from Content blocks through RichText, so the downloaded image matches what's rendered. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds an `xsmall` image size (33cqw, 12rem floor) below `small`, addressing the "additional, smaller size" request in #757. No migration needed — the select is stored as plain text, validated in the app layer. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Make MediaBlock (and InlineMedia) responsive sizing track the container the block occupies rather than the viewport, so the size options stay visually distinct in any context — a full-width page, the narrower blog body, or a column in a multi-column Content block.
Sizing is done entirely in CSS with container-query units (
cqw): each size is a percentage of the block's@container, with a px floor. Because images are lazy-loaded, thesizesattribute is set toauto, which lets the browser read the actual rendered (cqw) width and pick the matchingsrcsetcandidate — no JS width estimation needed.Also adds an Extra small size, the "additional, smaller size" requested in the issue.
Related Issues
Closes #757
Key Changes
src/blocks/Media/Component.tsx:@container; size classes use container units —xsmall→max-w-[max(12rem,33cqw)],small→max-w-[max(16rem,50cqw)],medium→max-w-[max(20rem,75cqw)],large→max-w-[max(24rem,90cqw)]sizes="auto"so the browser selects resolution from the rendered widthsrc/fields/imageSize.ts: newExtra small(xsmall) optionsrc/blocks/InlineMedia/Component.tsx:sizes="auto"for the percentage-width and fixed-height casesmedia-blocksHow it behaves
Each size renders as a share of its container, so the same setting is larger in a full-width layout and proportionally smaller in a narrow column. In very narrow columns (e.g. 4-column) the px floor wins and the larger sizes can converge — there isn't room to differentiate. Percentages/floors are tunable via the
cqwclass literals inMedia/Component.tsx.Notes / caveats
sizes="auto"requiresloading="lazy", which is the Media component's default. Apriority(above-the-fold) image isn't lazy, so it falls back to Next's defaultsizes.sizes="auto"is modern (Chrome/Edge 121+, Firefox, Safari 18+). Older browsers ignoreautoand fall back to a larger download — no breakage.loading="lazy" sizes="auto"with a full width-descriptorsrcset(16w–3840w), no dev warning.How to test
xsmall/small/medium/largeinside columns.<img>hassizes="auto"+ aw-descriptorsrcset, and that the network request scales with the rendered width.🤖 Generated with Claude Code