Fix Portfolio background image aspect-ratio warning - #92
Merged
Conversation
Tailwind's preflight forces height:auto on every <img>, which conflicted with the explicit height prop and triggered Next.js's "either width or height modified" warning. Fixed with an explicit inline style matching both dimensions (wins over preflight via specificity). Also set priority since Next flagged this image as the page's LCP candidate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Deployment failed with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- ServicesSection/PortfolioSection: 40px top margin on the section eyebrow labels on mobile only (mt-10 md:mt-0), matching Tailwind's default spacing scale rather than an arbitrary value. - PortfolioSection: flex-grow -> grow, flex-shrink-0 -> shrink-0 (deprecated Tailwind names; confirmed identical compiled CSS). - PortfolioSection: removed [&]:!hidden, [&]:lg:!block, [&]:!grid -- redundant duplicates of hidden, lg:block, and grid respectively (confirmed via compiled CSS output, same computed values). Kept the one non-redundant class, converting [&]:lg:!hidden to its plain equivalent lg:hidden since nothing else needs the !important override. Verified the desktop-carousel/mobile-grid toggle still switches correctly at the lg breakpoint via computed style checks at 375px/800px/1400px. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The previous fix set style={{ width: "632px", height: "843px" }} to
resolve the aspect-ratio console warning. Tailwind's preflight
max-width:100% still correctly shrinks the width on narrow viewports,
but a hard-coded height has no equivalent responsive cap. On mobile
the image rendered 390px wide but stayed a fixed 843px tall instead
of scaling to ~520px, pushing the "Completed Quests" text below it
into an overlap.
Changed height back to "auto" so it scales proportionally with
whatever width actually renders, matching production's original
behavior. Width stays an explicit pixel value, satisfying Next's
"both width and height must be modified together" check.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
skuhlmann
added a commit
that referenced
this pull request
Jul 20, 2026
* Fix Portfolio background image aspect-ratio warning (#92) * Fix aspect-ratio warning and add priority to Portfolio background image Tailwind's preflight forces height:auto on every <img>, which conflicted with the explicit height prop and triggered Next.js's "either width or height modified" warning. Fixed with an explicit inline style matching both dimensions (wins over preflight via specificity). Also set priority since Next flagged this image as the page's LCP candidate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * Add mobile label spacing, clean up deprecated/redundant Tailwind classes - ServicesSection/PortfolioSection: 40px top margin on the section eyebrow labels on mobile only (mt-10 md:mt-0), matching Tailwind's default spacing scale rather than an arbitrary value. - PortfolioSection: flex-grow -> grow, flex-shrink-0 -> shrink-0 (deprecated Tailwind names; confirmed identical compiled CSS). - PortfolioSection: removed [&]:!hidden, [&]:lg:!block, [&]:!grid -- redundant duplicates of hidden, lg:block, and grid respectively (confirmed via compiled CSS output, same computed values). Kept the one non-redundant class, converting [&]:lg:!hidden to its plain equivalent lg:hidden since nothing else needs the !important override. Verified the desktop-carousel/mobile-grid toggle still switches correctly at the lg breakpoint via computed style checks at 375px/800px/1400px. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * Fix mobile regression: Portfolio background image height was hard-coded The previous fix set style={{ width: "632px", height: "843px" }} to resolve the aspect-ratio console warning. Tailwind's preflight max-width:100% still correctly shrinks the width on narrow viewports, but a hard-coded height has no equivalent responsive cap. On mobile the image rendered 390px wide but stayed a fixed 843px tall instead of scaling to ~520px, pushing the "Completed Quests" text below it into an overlap. Changed height back to "auto" so it scales proportionally with whatever width actually renders, matching production's original behavior. Width stays an explicit pixel value, satisfying Next's "both width and height must be modified together" check. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> * Update hero copy: "is the OG decentralized collective" (#93) Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> * Deploy (#87) * bandaid on the client submission form * feat: add Vercel Analytics integration (#76) * feat: add Vercel Analytics integration * fix: harden server analytics tracking * fix: classify consultation submission errors * feat: improve form error message handling (#77) * feat: improve form error message handling * fix: wire services field accessibility * docs: add PR review workflow documentation * removes fathom (#78) * adds homepage content and contact form (#80) * Update cohort join page to link to Portal join (#81) * CR #131: Update cohort join page to link to Portal join * CR #131: Update cohort join page to link to Portal join * CR #131: Remove dependency lockfile churn --------- Co-authored-by: Prism Codex <prism-codex@users.noreply.github.com> * Add Join navigation link on website root page (#83) * CR #133: Add Join navigation link on website root page * CR #133: Add Join navigation link on website root page * Revert "CR #133: Add Join navigation link on website root page" This reverts commit 5bc6eb0. --------- Co-authored-by: Prism Codex <prism-codex@users.noreply.github.com> * Ai solutions (#84) * adds ai solutions services * removes contact page * more add * Install Plausible analytics script (#86) Co-authored-by: Prism Codex <prism-codex@users.noreply.github.com> * Add Plausible hire funnel events (#89) Co-authored-by: Prism Codex <prism-codex@users.noreply.github.com> --------- Co-authored-by: Sam Kuhlmann <samkuhlmann@gmail.com> Co-authored-by: ECWireless <40322776+ECWireless@users.noreply.github.com> Co-authored-by: Queen Raida <raidguildbot@gmail.com> Co-authored-by: Prism Codex <prism-codex@users.noreply.github.com> --------- Co-authored-by: Suede <101133311+Suede0619@users.noreply.github.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> Co-authored-by: Dekan <dekanbro@gmail.com> Co-authored-by: ECWireless <40322776+ECWireless@users.noreply.github.com> Co-authored-by: Queen Raida <raidguildbot@gmail.com> Co-authored-by: Prism Codex <prism-codex@users.noreply.github.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.
Summary
prioritysince Next.js flagged this image as the page's LCP candidateWhy
Tailwind's preflight forces
height: autoon every<img>tag, which conflicted with the explicitheight={843}prop. Fixed with an inlinestylematching both dimensions explicitly (inline styles win over the preflight rule via specificity).Test plan
bun run build— clean