feat: increase font size for mobile navigation links

[iamdin]

Summary

• Increase font size for mobile navigation links to improve readability on mobile devices
• Add text-xl class to navigation links in mobile nav component

Test plan

• Test mobile navigation on various mobile device sizes
• Verify font size is appropriate and readable
• Ensure no layout issues are introduced

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Increased font size for links in the mobile navigation for improved readability; applied consistent text styling to all links in that container.
• Chores
  • Updated avatar image handling to ensure the landing title image loads reliably.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 49dbf6a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Updated mobile navigation wrapper classes to add a Tailwind arbitrary variant that enlarges anchor text, and adjusted an image import to use ?url so the avatar resolves to a URL string. No structural, control-flow, export, or runtime-behavior changes.

Changes

Cohort / File(s)	Summary
Mobile nav styling apps/www/src/components/mobile-nav/index.astro	Changed wrapper div class from "flex flex-col space-y-3" to "flex flex-col space-y-3 [&_a]:text-xl" to apply text-xl to all descendant <a> elements.
Image import to URL apps/www/src/components/landing/shadcn-x-title.astro	Updated import of shadcn-avatar.jpg to include ?url, causing the imported value to be a direct URL string suitable for an src prop.

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

I nudged a class, made links stand tall,
Swapped a pic import—no break at all.
A rabbit hops, a tiny cheer,
Small tidy tweaks, the path grows clear. 🐇✨

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/mobile-env-font-size

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

🚀 Preview: https://7f9eda23-shipbase-ui.iamdin.workers.dev

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/www/src/components/mobile-nav/index.astro (1)

8-8: Optional: tighten line-height for wrapped links

Bumping to text-xl can 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 93928cc and 309b78c.

📒 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 clean

Using the Tailwind arbitrary variant [&_a]:text-xl to 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 any text-* utilities, so the [&_a]:text-xl rule won’t override smaller badges or pills.

[github-actions]

🚀 Preview: https://130b46a2-shipbase-ui.iamdin.workers.dev

[coderabbitai]

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).

?url returns a plain string and bypasses Astro’s image pipeline. With astro: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.

📥 Commits

Reviewing files that changed from the base of the PR and between 309b78c and 49dbf6a.

📒 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.