Add mobile responsiveness

[bprosen]

Summary by CodeRabbit

• Style
  • Improved responsive design on the Under Construction page with better spacing and typography scaling across mobile, tablet, and desktop devices for enhanced visual presentation.

_{✏️ 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	Dec 29, 2025 10:29pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The UnderConstruction component receives responsive styling updates including margin adjustments, scaled typography across breakpoints, and refactored Construction icon props. No behavioral changes or public API modifications are introduced.

Changes

Cohort / File(s)	Summary
Responsive UI Styling src/components/UnderConstruction/UnderConstruction.tsx	Card container margins updated to responsive values (md:max-w-xl my-4 mx-12 sm:mx-4 md:mx-auto); CardTitle scales from text-3xl to text-2xl with sm:text-3xl breakpoint; Construction component now uses separate color and strokeWidth props instead of single size prop; paragraph text adjusted to text-base sm:text-lg with centered alignment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Update construction page #10: Modifies the same UnderConstruction.tsx component, adjusting title sizing/spacing and Construction icon props (color, size/strokeWidth).
• Add UnderConstruction page and testing #8: Updates the same UnderConstruction component's JSX/classes and props with responsive styling and stroke adjustments.

Poem

🐰 Under construction, now with grace,
Responsive styles fit any space!
From small screens to desktop wide,
Our UI hops with elegant stride,
No bugs, just beauty—let it run! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add mobile responsiveness' directly and clearly summarizes the main change in the pull request, which is adding responsive design adjustments across different screen sizes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70592f9 and 6915b43.

📒 Files selected for processing (1)

• src/components/UnderConstruction/UnderConstruction.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/UnderConstruction/UnderConstruction.tsx (1)

src/ui/Card.tsx (4)

• Card (5-16)
• CardHeader (18-32)
• CardTitle (34-45)
• CardContent (76-87)

🔇 Additional comments (2)

src/components/UnderConstruction/UnderConstruction.tsx (2)

8-8: LGTM!

The responsive text sizing follows a mobile-first approach with appropriate scaling: text-2xl (24px) on mobile devices and sm:text-3xl (30px) on larger screens. Center alignment is properly applied.

---

18-18: LGTM!

The responsive text sizing (text-base → sm:text-lg) provides a mobile-first approach with appropriate scaling for body text. Center alignment is correctly applied.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Horizontal margin too large for mobile screens.

The margin progression mx-12 sm:mx-4 md:mx-auto applies 48px horizontal margin (96px total) on screens below 640px. On small mobile devices (320px–414px), this leaves minimal space for card content and can severely impact readability or cause overflow.

For mobile responsiveness, the base (smallest screen) should have the smallest margin, then scale up.

🔎 Proposed fix

-    <Card className='shadow-xl md:max-w-xl my-4 mx-12 sm:mx-4 md:mx-auto'>
+    <Card className='shadow-xl md:max-w-xl my-4 mx-4 sm:mx-8 md:mx-auto'>

This provides a mobile-first progression: 16px (mobile) → 32px (small) → centered (medium+).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<Card className='shadow-xl md:max-w-xl my-4 mx-12 sm:mx-4 md:mx-auto'>
	<Card className='shadow-xl md:max-w-xl my-4 mx-4 sm:mx-8 md:mx-auto'>

🤖 Prompt for AI Agents

In src/components/UnderConstruction/UnderConstruction.tsx around line 6, the
Card uses a large base horizontal margin ('mx-12 sm:mx-4 md:mx-auto') which
creates excessive spacing on very small screens; change the utility classes to a
mobile-first progression such as 'mx-4 sm:mx-8 md:mx-auto' so the base (mobile)
margin is 16px, small screens get 32px, and medium+ screens remain centered.