fix(ui): improve submit button sizing on mobile

[nishi240931]

What changed

Adjusted the "Submit an Article" button styling to improve mobile responsiveness.

Why

On smaller screens, the button appeared oversized and visually dominated the header.

How it was tested

• Verified layout at 375px (mobile) and desktop view.
• Confirmed no changes to desktop styling.

Screenshots

After (mobile view):

Summary by CodeRabbit

• Style
  • Updated the Submit Article link with enhanced visual styling, adding rounded corners and responsive spacing for improved design.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates to app/page.tsx include minor indentation adjustments to the handlePageChange function and styling enhancements to the Submit Article link, replacing a static className with a template literal containing rounded corners and responsive padding rules.

Changes

Cohort / File(s)	Summary
Styling & Formatting Updates app/page.tsx	Indentation refactored in handlePageChange function (no logic changes). Submit Article link className converted to multi-line template literal with added rounded corners (rounded-lg) and responsive padding/sizing utilities.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A dash of style, a touch of grace,
Rounded corners in their place! 🐰
The code now breathes with spacing fine,
Where once was static, now does shine.
Small tweaks, yet beauty's in the line! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: improving the Submit button's mobile sizing through responsive styling adjustments.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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: 0

🧹 Nitpick comments (1)

app/page.tsx (1)

130-134: Remove excessive blank lines.

Five consecutive empty lines appear unintentional and reduce code cleanliness. Consider reducing to 1-2 blank lines for standard spacing.

🔎 Suggested cleanup

              </Link>
-

-

-

-
        </div>
+        </div>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 113d28d and 4ea6e2c.

📒 Files selected for processing (1)

• app/page.tsx

🔇 Additional comments (2)

app/page.tsx (2)

71-75: LGTM! Indentation adjustment.

The formatting changes improve consistency without altering the function's logic.

---

112-129: Excellent mobile-first responsive styling!

The responsive classes effectively address the mobile sizing issue mentioned in the PR objectives:

• Mobile (default): px-3 py-2 text-sm provides a compact button that won't dominate the header
• Desktop (sm: breakpoint): px-6 py-3 text-base maintains the original comfortable sizing
• rounded-md adds visual polish

The implementation correctly uses Tailwind's mobile-first approach and preserves all existing hover effects, gradients, and transitions.