fix(home): high-res image and correct sizing for Independent by Design [INTORG-664]#305
Merged
Conversation
…n [INTORG-664] - Replace 359x359 PNG with the 2250x2253 transparent export so it doesn't pixelate on retina screens at the 426px display target. - Render via OptimizedImage so the build pipeline serves the right WebP variant per breakpoint. - Re-add tablet:w-[40%] and override on desktop with w-full so the image is ~40% on tablet (per Figma) but fills its 40% media column on desktop instead of shrinking to ~16% of content width.
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
✅ Deploy Preview for interledger-org-v5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ORG-663] The media column had `desktop:basis-[40%]` while images were capped at `max-w-[426px]`. The difference became dead column space adjacent to gap-6xl, visibly inflating the gap and starving the text column. - Media column now `desktop:shrink-0` only, so it sizes to content. - Text column gets the reclaimed width (text column is ~86px wider on a 1440 desktop). - Problem section's video div and the preview page slots were anchoring on `desktop:w-full` which collapses against a content-sized parent; switched both to explicit desktop widths matching previous render. - Independent by Design picture: img inside switched from `w-full` to `max-w-full` so the picture has an intrinsic anchor on desktop and doesn't collapse.
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
# Conflicts: # src/components/pages/HomePage.astro
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
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
2 participants
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.
Summary
Fixes two issues Jon flagged on the Independent by Design section of the homepage:
OptimizedImageso the build pipeline emits 640/1280/1920 WebP variants and the browser picks the right one per DPR/breakpoint.tablet:w-[40%]was cascading into desktop, where the media column is alreadydesktop:basis-[40%], so the image ended up at ~16% of content width. Re-addedtablet:w-[40%](matches the Figma tablet "fill — max 40%" annotation) and addeddesktop:w-fullso the image fills its column up tomax-w-[426px]on desktop, matching the 426×427 Figma spec.sizesupdated to(min-width: 1280px) 426px, (min-width: 768px) 40vw, 100vwso the responsive picker requests appropriately sized variants on tablet.Related Issue
INTORG-664
Manual Test
/on mobile (≤767px), tablet (768–1279px), and desktop (≥1280px).Checks
pnpm run formatpnpm run lintPR Checklist