feat: increase font size for mobile navigation links #75
Conversation
Add text-xl class to mobile navigation links to improve readability on mobile devices. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
WalkthroughUpdated mobile navigation wrapper classes to add a Tailwind arbitrary variant that enlarges anchor text, and adjusted an image import to use Changes
Sequence Diagram(s)(Changes are presentational and asset-import only; no control-flow or feature interactions to diagram.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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)
apps/www/src/components/mobile-nav/index.astro (1)
8-8: Optional: tighten line-height for wrapped linksBumping to
text-xlcan look loose on narrow screens. Consider tightening line-height for anchors.Apply:
- <div class="flex flex-col space-y-3 [&_a]:text-xl"> + <div class="flex flex-col space-y-3 [&_a]:text-xl [&_a]:leading-snug">If only top-level links should be larger (not nested anchors), an alternative is:
- <div class="flex flex-col space-y-3 [&_a]:text-xl"> + <div class="flex flex-col space-y-3 [&>a]:text-xl">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/www/src/components/mobile-nav/index.astro(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
apps/www/**/*
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Document all components and features in the documentation website (apps/www/)
Files:
apps/www/src/components/mobile-nav/index.astro
apps/www/src/**
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
The main documentation website source code must be located under apps/www/src/
Files:
apps/www/src/components/mobile-nav/index.astro
apps/www/**
📄 CodeRabbit inference engine (AGENTS.md)
Host the documentation site code in apps/www (Astro/MDX/Tailwind v4)
Files:
apps/www/src/components/mobile-nav/index.astro
🧠 Learnings (1)
📓 Common learnings
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/code-standards.mdc:0-0
Timestamp: 2025-08-03T17:49:16.881Z
Learning: Applies to **/*.{tsx,vue} : Prefer Tailwind built-in classes for styling
🧬 Code graph analysis (1)
apps/www/src/components/mobile-nav/index.astro (1)
apps/www/src/components/mobile-nav/sheet.tsx (1)
MobileNavSheet(5-22)
🔇 Additional comments (2)
apps/www/src/components/mobile-nav/index.astro (2)
8-8: LGTM: simple, scoped font bump is cleanUsing the Tailwind arbitrary variant
[&_a]:text-xlto target links inside the container is idiomatic and achieves the PR goal without structural churn.
8-8: Verified no explicit text-size on Sidebar links; override is safe
All<a>tags in the Sidebar component lack anytext-*utilities, so the[&_a]:text-xlrule won’t override smaller badges or pills.
Fix image import to use ?url parameter for proper asset handling. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/www/src/components/landing/shadcn-x-title.astro (2)
3-3: Use a metadata import with astro:assets<Image>(avoid?url).
?urlreturns a plain string and bypasses Astro’s image pipeline. Withastro:assets, prefer importing the image as metadata so<Image>can optimize it (srcset, formats, etc.). Switch back to the default import.
Apply:-import shadcnAvatar from "@/assets/images/shadcn-avatar.jpg?url" +import shadcnAvatar from "@/assets/images/shadcn-avatar.jpg"If you intentionally want a raw URL, then use a plain
<img src={shadcnAvatar} ...>instead of<Image>. See Astro docs on<Image>expecting a metadata import and when to use<img>. (docs.astro.build)
9-13: Nit: Make the alt text more descriptive for a11y.“shadcn” is terse. Consider “shadcn avatar” or similar.
- alt="shadcn" + alt="shadcn avatar"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/www/src/components/landing/shadcn-x-title.astro(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
apps/www/**/*
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Document all components and features in the documentation website (apps/www/)
Files:
apps/www/src/components/landing/shadcn-x-title.astro
apps/www/src/**
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
The main documentation website source code must be located under apps/www/src/
Files:
apps/www/src/components/landing/shadcn-x-title.astro
apps/www/**
📄 CodeRabbit inference engine (AGENTS.md)
Host the documentation site code in apps/www (Astro/MDX/Tailwind v4)
Files:
apps/www/src/components/landing/shadcn-x-title.astro
🔇 Additional comments (1)
apps/www/src/components/landing/shadcn-x-title.astro (1)
1-4: Confirm PR scope alignment.This avatar import tweak seems unrelated to “increase font size for mobile navigation links.” If it isn’t required for that change, consider moving it to a separate PR to keep histories focused.
Summary
text-xlclass to navigation links in mobile nav componentTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit