make mobile better

[bprosen]

Summary by CodeRabbit

• New Features

  • Home page now detects device type and adapts visuals and controls for improved mobile and desktop experiences.

• Style

  • Reduced horizontal margins on the Under Construction card for better small-screen layout.
  • Simplified paragraph typography for more consistent text sizing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
website	Ready	Preview, Comment	Jan 18, 2026 9:13pm

[coderabbitai]

Warning

Rate limit exceeded

@bprosen has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 22 minutes and 8 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

📥 Commits

Reviewing files that changed from the base of the PR and between 6f903ac and 981314d.

📒 Files selected for processing (1)

• src/routes/Home.tsx

📝 Walkthrough

Walkthrough

Adds server-side mobile detection via a new isMobile() utility that reads User-Agent, converts Home to an async component that queries isMobile(), and uses the result to conditionally set VantaNet animation props. Also adjusts small presentational className changes in UnderConstruction.

Changes

Cohort / File(s)	Summary
Mobile Detection Utility src/lib/utils.ts	New exported async isMobile() that reads the User-Agent via Next.js headers() and userAgentFromString, returning a boolean for mobile devices.
Mobile-aware Home Component src/routes/Home.tsx	Home changed from synchronous to async, calls isMobile() and conditionally sets VantaNet props: gyroControls, mouseControls, touchControls, maxDistance, and spacing.
Styling refinements src/components/UnderConstruction/UnderConstruction.tsx	Minor presentational edits: horizontal margin reduced (sm:mx-4 → sm:mx-2) and paragraph typography simplified (text-base sm:text-lg → text-base).

Sequence Diagram(s)

sequenceDiagram
  participant NextServer as "Next.js Server"
  participant HomeComp as "Home (async)"
  participant Utils as "isMobile()"
  participant VantaNet as "VantaNet component"

  Note over NextServer,HomeComp: Request to render Home (server)
  HomeComp->>Utils: call isMobile()
  Utils->>NextServer: read headers().get("user-agent")
  NextServer-->>Utils: user-agent string
  Utils-->>HomeComp: boolean isMobile
  HomeComp->>VantaNet: render with props (gyro/mouse/touch/maxDistance/spacing)
  VantaNet-->>HomeComp: rendered Vanta animation

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix types and add animated background #12: Prior changes to Home.tsx and VantaNet prop handling that this PR extends with mobile detection.
• Add UnderConstruction page and testing #8: Presents overlapping presentational edits to UnderConstruction.tsx.
• Update construction page #10: Similar adjustments to UnderConstruction.tsx markup and styling.

Poem

🐰 I sniff the headers, soft and still,
A tiny hop, a server thrill.
VantaNet bends to palm and gaze,
Spacing tuned for mobile days.
A happy hop — code lights the way! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'make mobile better' is vague and generic, using non-descriptive language that doesn't convey specific information about the actual changes made to the codebase.	Use a more specific title that describes the actual changes, such as 'Add mobile detection and optimize VantaNet props for mobile devices' or 'Implement isMobile utility and responsive component behavior'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/routes/Home.tsx`:
- Around line 12-16: In Home.tsx the control props are inverted for mobile:
update the props on the component that currently sets gyroControls={!mobile},
touchControls={!mobile}, mouseControls={!mobile} so that gyroControls={mobile}
and touchControls={mobile} while keeping mouseControls={!mobile}; verify related
props (maxDistance, spacing) remain conditional on the mobile boolean if
intended. Locate these prop assignments (gyroControls, touchControls,
mouseControls) and flip the mobile boolean usage as described.

🧹 Nitpick comments (1)

src/lib/utils.ts (1)

2-14: Consider splitting isMobile into a server-only module for clearer boundaries.

src/lib/utils.ts currently exports both cn (client utility) and isMobile (server function). While the current code works correctly—Card and Button are server components—mixing server imports (next/headers) with client utilities creates a maintenance risk. Separating isMobile into a dedicated server-only module (e.g., src/lib/server/isMobile.ts) would prevent accidental misuse and make intent clearer.

Suggested split

Create src/lib/server/isMobile.ts:

import 'server-only';
import { headers } from 'next/headers';
import { userAgentFromString } from 'next/server';

export const isMobile = async (): Promise<boolean> => {
  const headersList = await headers();
  const userAgent = headersList.get('user-agent') || '';
  const agent = userAgentFromString(userAgent);

  return agent?.device?.type === 'mobile';
};

Remove from src/lib/utils.ts:

-import { headers } from 'next/headers';
-import { userAgentFromString } from 'next/server';
 import { twMerge } from 'tailwind-merge';

 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

-export const isMobile = async (): Promise<boolean> => {
-  const headersList = await headers();
-  const userAgent = headersList.get('user-agent') || '';
-  const agent = userAgentFromString(userAgent);
-
-  return agent?.device?.type === 'mobile';
-};