Skip to content

fix: add explicit dimensions to navbar and marquee logos#789

Open
franklinjavier wants to merge 1 commit intoTanStack:mainfrom
franklinjavier:franklinjavier/logo-dimensions
Open

fix: add explicit dimensions to navbar and marquee logos#789
franklinjavier wants to merge 1 commit intoTanStack:mainfrom
franklinjavier:franklinjavier/logo-dimensions

Conversation

@franklinjavier
Copy link
Copy Markdown

@franklinjavier franklinjavier commented Mar 26, 2026

Summary

  • Add width/height to navbar logo SVG <img> tags (black and white variants)
  • Add width/height to marquee brand logo <img> tags and set explicit w-24 h-14 classes

Without intrinsic dimensions, the browser can't reserve space before images load, causing layout shift.

Test plan

  • Navbar logo should not shift on page load
  • Marquee logos should not cause layout shift as they load

Summary by CodeRabbit

  • Bug Fixes
    • Improved logo display consistency with standardized sizing throughout the application.

Without intrinsic dimensions the browser can't reserve space before
images load, causing layout shift. Add width/height attributes to
navbar logo SVGs and marquee brand logos.
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 26, 2026

👷 Deploy request for tanstack pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 544dee0

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d662e9f7-3e87-4229-a243-249d96e72ce7

📥 Commits

Reviewing files that changed from the base of the PR and between e71479b and 544dee0.

📒 Files selected for processing (2)
  • src/components/Navbar.tsx
  • src/components/TrustedByMarquee.tsx

📝 Walkthrough

Walkthrough

Two logo components now have explicit width and height dimensions added. The Navbar's LogoSection receives fixed 30px dimensions on logo images, while the TrustedByMarquee component's logos get explicit 96x56px attributes and Tailwind class updates to standardize sizing.

Changes

Cohort / File(s) Summary
Logo Image Dimension Standardization
src/components/Navbar.tsx, src/components/TrustedByMarquee.tsx
Added explicit width and height props/attributes to logo <img> elements; updated Tailwind classes from w-auto h-auto to fixed sizing (w-24 h-14) with retained responsive constraints and hover styling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 The logos now stand proud and tall,
With dimensions set, they answer the call,
No more ambiguous auto-sizing sight,
Explicit and proper—our designs feel right!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: adding explicit width and height dimensions to logo images in the navbar and marquee components to prevent layout shift.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant