fix: adjust info banner for mobile screens#501
Conversation
The banner was positioned at top-12 (48px) while the mobile navbar is h-16 (64px), causing overlap. Increased vertical and left padding on mobile for better readability when text wraps to multiple lines. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Preview is deploying...| ℹ️ Name | 🔗 Infos & links |
|---|---|
| 🌱 Deploying commit | 9fa1777 |
| 👁️ Preview | Generating preview app... |
cyrilledaily
left a comment
cyrilledaily
left a comment
There was a problem hiding this comment.
LGTM — straightforward fix, well-scoped.
The bug: The mobile navbar is h-16 (64px) but the banner was positioned at top-12 (48px), so it was overlapping by 16px. On desktop the navbar is h-20 (80px) and the banner used lg:top-20 which was already correct.
The fix: top-12 → top-16 aligns with the mobile navbar height. The extra padding (py-2 pl-2 on mobile, preserved with lg:py-1 lg:pl-1 on desktop) is a nice touch for multi-line text readability on small screens.
One minor note: the <a> element was reformatted from one line to multi-line and underline font-semibold was reordered to font-semibold underline — purely cosmetic but consistent with Tailwind's recommended class ordering (typography before decoration). No functional change.
Clean and minimal. 👍
2 participants
Summary
BandeauInfo) overlapping with the navbar on mobile:top-12(48px) was misaligned with the mobile navbar heighth-16(64px), changed totop-16py-2 pl-2) so wrapped text has proper spacinglg:breakpoint variantsTest plan
🤖 Generated with Claude Code