Referral link popup css fix #67
Conversation
WalkthroughResponsive layout and spacing adjustments were made across the UI: bottom navigation wrapping, gap and padding changes, and referral popover z-index increase. Multiple route pages had grid and width constraints tightened or converted to auto-fit responsive grids; leaderboard width became a responsive clamp. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
lark-ui/src/lib/BottomNavigation.svelte (1)
339-353: Z-index bump for popover looks correct; consider documenting stacking scaleRaising
.referral-popovertoz-index: 1001is consistent with.bottom-navigation’sz-index: 1000and should reliably keep the popover above other bottom-nav content and nearby UI. This is a safe, localized visual fix.If you anticipate more overlays in this area later, you might want to centralize/document your z-index “layers” (e.g., with a short comment or design token) to avoid future magic numbers, but that’s not required for this PR.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
lark-ui/src/routes/app/explore/+page.svelte (1)
250-250: Duplicate responsive grid pattern.This file uses the same inline responsive grid style as
lark-ui/src/routes/app/shop/+page.svelte. See the refactoring suggestion in that file's review to consolidate this pattern.
🧹 Nitpick comments (3)
lark-ui/src/routes/app/shop/+page.svelte (1)
79-79: Consider extracting the responsive grid to a reusable class.The inline style for responsive grid works well, but since this pattern is duplicated in
lark-ui/src/routes/app/explore/+page.svelte(line 250), consider extracting it to a shared CSS class or Tailwind utility for better maintainability.Example approach:
/* In a shared stylesheet or component style */ .responsive-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }Then use:
-<div class="grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"> +<div class="responsive-card-grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]">lark-ui/src/lib/BottomNavigation.svelte (2)
346-346: Z-index value is correct but suggests a larger organizational issue.The z-index increase to 1001 properly layers the referral popover above the bottom navigation (z-index: 1000 at line 250), which likely fixes the popup visibility issue mentioned in the PR title. However, the large jump from the previous value of 200 suggests the z-index scale may need better organization.
Consider establishing a clear z-index scale for the application to prevent future stacking context issues, e.g.:
- Base content: 1
- Navigation: 100
- Modals/overlays: 200
- Popovers: 300
- Tooltips: 400
395-401: Consider using Tailwind's responsive utilities.The responsive breakpoint adjustments use raw CSS media queries. For consistency with the rest of the Tailwind-based codebase, consider using Tailwind's responsive modifiers instead.
Example Tailwind approach:
<div class="bottom-nav-items px-[120px] md:px-5 sm:px-2">And for the gap:
<div class="nav-tabs gap-[60px] md:gap-5 sm:gap-3">However, since the existing media queries are already in place and working, this is a low-priority suggestion for future consistency.
Also applies to: 414-420
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
lark-ui/src/lib/BottomNavigation.svelte(4 hunks)lark-ui/src/routes/+page.svelte(2 hunks)lark-ui/src/routes/app/explore/+page.svelte(1 hunks)lark-ui/src/routes/app/explore/Leaderboard.svelte(1 hunks)lark-ui/src/routes/app/shop/+page.svelte(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Seer Code Review
🔇 Additional comments (2)
lark-ui/src/routes/app/explore/Leaderboard.svelte (1)
39-39: LGTM! Good responsive sizing improvement.The
clamp()function ensures the leaderboard maintains a readable width across all screen sizes by constraining it between 200px and 400px while preserving the 18vw basis.lark-ui/src/routes/+page.svelte (1)
388-388: Verify the visual impact of width reduction.The width constraint has been tightened from
110%(intentionally overflowing) to95%(contained within parent) for both the video container and envelope image. This is a significant layout change that alters the original design intent.Please visually verify:
- The video and envelope sections maintain the intended visual hierarchy
- No unexpected whitespace appears on wider viewports
- The design still achieves the desired aesthetic impact
#!/bin/bash # Check if there are any other references to the 110% width pattern that might need updating rg -n "w-\[110%\]" --type=svelteAlso applies to: 404-404
| min-width: 0; | ||
| flex-wrap: wrap; |
There was a problem hiding this comment.
Verify flex-wrap behavior on narrow viewports.
The CSS applies both overflow-x: auto (line 264) and flex-wrap: wrap (line 271) to the navigation—these settings are contradictory. With flex: 1 distributing equal widths among tabs and 16px gaps, tabs will wrap to multiple lines rather than scroll horizontally when space is constrained. Test the navigation at 480px-768px viewport widths to confirm:
- Tabs don't wrap prematurely with the expected number of items
- Multi-row layout remains usable and accessible if wrapping occurs
- Whether horizontal scrolling is preferred over wrapping
🤖 Prompt for AI Agents
In lark-ui/src/lib/BottomNavigation.svelte around lines 264 to 271, the
component currently sets both overflow-x: auto and flex-wrap: wrap which
conflict and cause tabs to wrap into multiple rows on narrow viewports; update
the stylesheet so the navigation either scrolls horizontally OR wraps
intentionally: remove or override flex-wrap: wrap on the container and ensure
child tabs have a reasonable min-width and flex: 0 0 auto so they can scroll, OR
keep flex-wrap but remove overflow-x: auto and adjust gap/margins and keyboard
focus order for multi-row accessibility; implement this behavior with a
responsive media query (e.g., 480–768px) that switches between non-wrapping
horizontal scroll and wrapping multi-row layout and test at those breakpoints to
confirm expected behavior and accessibility.
1 participant
Summary by CodeRabbit
Bug Fixes
UI / Layout Improvements
Responsive Enhancements
✏️ Tip: You can customize this high-level summary in your review settings.