Sponser Responsive#49
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the Sponsors page layout to be more responsive by introducing a mobile-friendly stacked/grid presentation while preserving the desktop marquee experience.
Changes:
- Tweaked SponsorCard typography/padding for improved readability across breakpoints.
- Refactored CategoryGroup layout to support mobile grid rendering and adjusted spacing/sizing for responsive behavior.
- Updated overall page container/header sizing and overflow behavior to better support mobile scrolling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="grid grid-rows-2 grid-flow-col gap-2 md:gap-4"> | ||
| {/* Sponsor Grid Container */} | ||
| <div className="p-4 sm:p-5 pt-8 md:pt-9 border-[1.5px] border-[#C5A059] bg-black/40 backdrop-blur-xl rounded-xl shadow-[0_0_20px_rgba(197,160,89,0.15)] flex justify-center h-full"> | ||
| <div className="grid grid-cols-2 md:grid-rows-2 md:grid-flow-col gap-3 md:gap-4 lg:gap-6 w-full md:w-auto"> |
There was a problem hiding this comment.
At md+ breakpoints this grid still has grid-cols-2 applied (because it isn’t overridden), which can interact unexpectedly with md:grid-flow-col/md:grid-rows-2 and produce inconsistent column sizing/implicit columns. Consider adding an explicit md column template (e.g., md:grid-cols-none or a specific md:grid-cols-*) that matches the intended desktop marquee layout.
| <div className="grid grid-cols-2 md:grid-rows-2 md:grid-flow-col gap-3 md:gap-4 lg:gap-6 w-full md:w-auto"> | |
| <div className="grid grid-cols-2 md:grid-cols-none md:grid-rows-2 md:grid-flow-col gap-3 md:gap-4 lg:gap-6 w-full md:w-auto"> |
| <div className="grid grid-cols-2 md:grid-rows-2 md:grid-flow-col gap-3 md:gap-4 lg:gap-6 w-full md:w-auto"> | ||
| {sponsors.map((s, idx) => ( | ||
| <div key={idx} className="w-[85px] md:w-[105px] lg:w-[115px]"> | ||
| <div key={idx} className="w-full md:w-[110px] lg:w-[125px] aspect-square md:aspect-auto"> |
There was a problem hiding this comment.
On mobile this wrapper uses aspect-square while SponsorCard includes both a square logo area and a separate name line below it. Constraining the container to a square height is likely to cause vertical overflow or squashed layout. Consider removing aspect-square here (or reworking SponsorCard so its contents fit within the enforced aspect ratio).
| <div key={idx} className="w-full md:w-[110px] lg:w-[125px] aspect-square md:aspect-auto"> | |
| <div key={idx} className="w-full md:w-[110px] lg:w-[125px]"> |
No description provided.