fix: enforce explicit logo height + tighten shell dimensions#434
Conversation
Two follow-ups to LLM-Coding#433 against the persistent CLS 0.975 issue. ## 1. Logo: max-h-24 → h-24 (explicit height) Lighthouse continued to attribute the layout shift to the header logo even after LLM-Coding#431 added width="218" height="96" attributes. Root cause: Tailwind's preflight resets all images to `height: auto`, which overrides the HTML height attribute. `max-h-24` only caps the height, it doesn't enforce one — so before the image loads, the rendered height is `auto` (= 0). When the PNG actually loads, the header grows by 96px and pushes everything below. `h-24` (height: 6rem) explicitly sets the height in CSS, overriding preflight's `auto`. Combined with `w-[218px]` (and the matching mobile sizes), the browser reserves the exact box from first paint. ## 2. Shell-header / shell-footer dimensions match the rendered ones The static skeleton in LLM-Coding#433 used min-height: 10.5rem for the header placeholder, but the real <header> renders at ~8.75rem (140px: py-3 + h-24 logo + slogan + border). When hydrateShell() replaced the placeholder, the header shrank by ~28px and #page-content moved up by the same amount — a small but real shift on top of every other load contribution. Tighten the placeholders to match: header 8.75rem, footer 6rem (already correct), and update #page-content min-height accordingly. These are smaller contributions than the cards-loading shift, but they clean up the easily-fixable signal first so the next Lighthouse run isolates the remaining CLS to the actual hard problem. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 31 minutes and 24 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ 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 |
2 participants
Two follow-ups to #433 against the persistent CLS 0.975 issue.
1. Logo: `max-h-24` → `h-24` (explicit height)
Lighthouse continued to attribute the layout shift to the header logo even after #431 added `width="218" height="96"` attributes. Root cause: Tailwind's preflight resets all images to `height: auto`, which overrides the HTML height attribute. `max-h-24` only caps the height — it doesn't enforce one — so before the image loads, the rendered height is `auto` (= 0). When the PNG actually loads, the header grows by 96px and pushes everything below.
`h-24` (`height: 6rem`) sets the height in CSS, overriding preflight's `auto`. Combined with `w-[218px]` (and the matching mobile sizes), the browser reserves the exact box from first paint.
2. Shell-header / shell-footer dimensions match the rendered ones
The static skeleton in #433 used `min-height: 10.5rem` for the header placeholder, but the real `
` renders at ~8.75rem (140px: py-3 + h-24 logo + slogan + border). When `hydrateShell()` replaced the placeholder, the header shrank by ~28px and `#page-content` moved up by the same amount — a small but real shift on top of every other load contribution.Tightened the placeholders: header 8.75rem, footer 6rem, and updated `#page-content` min-height accordingly.
Status
These are smaller contributions than the dominant cards-loading shift, but they clean up the easily-fixable signal first so the next Lighthouse run isolates the remaining CLS to the actual hard problem (cards growing `#page-content` and pushing the footer down by ~6000px when the data fetch completes).
If CLS doesn't drop below ~0.5 after this lands, the next step is pre-rendering the homepage card grid into static HTML — same approach as the doc routes in #429, but for the homepage's `#page-content`.
🤖 Generated with Claude Code