fix(content): mobile layout regressions on detail + listing pages#106
Merged
ahnafnafee merged 3 commits intomainfrom Apr 27, 2026
Merged
fix(content): mobile layout regressions on detail + listing pages#106ahnafnafee merged 3 commits intomainfrom
ahnafnafee merged 3 commits intomainfrom
Conversation
Five tightly-coupled fixes the user surfaced from a mobile read-through:
1. Blog post detail page no longer renders the OG thumbnail as a body
hero. On narrow viewports it dominated the fold and pushed the
headline below the scroll. The thumbnail still feeds OG/Twitter
metadata + the BlogItem listing card; the post page keeps its
canonical claim via JSON-LD primaryImage.
2. ResearchTeaser rebuilt with an `aspect-video` box + `object-contain`
so the entire scientific figure is visible at every viewport width.
The previous `fill + h-72/h-96/h-[28rem] + object-cover` pattern
reframed the image at every breakpoint and clipped figure labels
on mobile.
3. ResearchItem listing card stacks vertically on mobile (image full
width above content) and lays out side-by-side from md+ — matching
the BlogItem / PortfolioItem pattern. The previous always-row
layout left a 128px-tall thumbnail squished against a column of
wrapping text on phones. `sizes` updated so next/image requests the
right resolution at each breakpoint.
4. ResearchItem venue line: dropped the `[…]` square brackets, switched
to italic + softer color. Reads as a venue caption (academic
convention) instead of bracketed metadata.
5. UnstyledLink no longer passes `scroll={false}` to NextLink. Default
Next.js behavior (scroll-to-top on a new path, hash-aware for
in-page anchors) is restored — the previous flag stranded readers
mid-page when navigating between posts.
Verified: yarn type-check, yarn lint, yarn test (48/48), yarn build
(50 routes) all clean.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The research listing thumbnail used `object-cover` with `aspect-[5/4]`, which cropped the sides of the image when the source had a wider aspect ratio than 5:4 — losing visible content (e.g. the "Vertex Clustering" column on the mesh-decimation thumbnail got clipped on mobile). Research figures often have edge-to-edge content (axes, labels, panel titles) that can't be safely cropped by a center-focused fit. Switch to `object-contain` so the full image always fits within the box; the existing bg-gray tile fills any letterbox gaps when the source aspect ratio doesn't match 5:4. BlogItem / PortfolioItem stay on object-cover since those thumbnails are typically photographic with a center subject.
Replaces the fixed `aspect-[5/4]` box + `object-contain` (which letterboxed the image with a bg-gray tile) with a native `<img>` rendered at `w-full h-auto`. The listing card now sizes itself to the image's intrinsic aspect ratio — no cropping, no letterboxing. Trade-off: gives up next/image's automatic AVIF/WebP and srcset for the listing thumbnails. ImageKit URLs already serve modern formats based on Accept headers, and we still apply the right width transform via resolveListingImage (`?tr=w-600`), so the practical loss is small. The ComingSoon placeholder keeps the explicit `aspect-[5/4]` since it's a styled div with no intrinsic dimensions to fall back on.
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.
Five tightly-coupled fixes the user surfaced from a mobile read-through.
What's wrong / what's fixed
<figure>fromHeadingContent.tsx. Thumbnail still feeds OG/Twitter metadata + the listing card. JSON-LDprimaryImagekeeps the SEO canonical claim.ResearchTeaserreframed the image at every breakpoint (fill + h-72 sm:h-96 md:h-[28rem] + object-cover) and clipped figure labels on mobile.aspect-videobox +object-contain. Whole figure visible at any width; bg tile shows behind only when the source aspect ratio mismatches.ResearchItemlisting card was always row-layout — a 128px-tall thumbnail jammed against a column of wrapping text on phones.md:flex-rowon tablet+. MirrorsBlogItem/PortfolioItem.sizesupdated so next/image picks the right resolution per breakpoint.ResearchItemvenue line had[…]square brackets in bold.UnstyledLinkno longer passesscroll={false}toNextLink. Default Next.js behavior (scroll-to-top on a new path, hash-aware for#anchorlinks) is restored.Note on the portfolio detail body hero
The portfolio detail page (
/portfolio/[slug]) also had afill + h-56 sm:h-72 md:h-96 + object-coverbody hero. I initially removed it, but the file got reverted — keeping it as-is per that signal. If you want the same treatment as blog/research applied later, I can do it in a follow-up.Test plan
yarn type-checkcleanyarn lintcleanyarn test48/48yarn build50 routes/blog/<slug>,/research/<slug>,/research,/, internal nav scrolling