fix(web): quiz button full width at xs and sm viewports

[Kneesal]

Summary

• Changes the quiz button wrapper from sm:w-auto to md:w-auto so the button remains full-width (100%) at xs and sm viewports and only shrinks at md and above.

Contracts Changed

No

Regeneration Required

No

Validation

• Visually verified Tailwind class logic: w-full applies by default, md:w-auto kicks in at 768px+, and lg/xl/2xl sizing is unchanged.

Resolves #495

Made with Cursor

Summary by CodeRabbit

• Style
  • Updated the quiz button’s spacing and responsive behavior: reduced horizontal padding and adjusted layout breakpoint for improved appearance on medium and larger screens.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e1527ae-f64c-436b-829c-846c494f6db6

📥 Commits

Reviewing files that changed from the base of the PR and between 185cfaf and c1b9337.

📒 Files selected for processing (1)

• apps/web/src/components/sections/QuizButton.tsx

---

Walkthrough

Changed Tailwind responsive width on the QuizButton wrapper from sm:w-auto to md:w-auto so the button stays full-width at xs and sm and becomes auto-width at md and above.

Changes

Cohort / File(s)	Summary
Responsive Breakpoint Update apps/web/src/components/sections/QuizButton.tsx	Replaced sm:w-auto with md:w-auto on the outer wrapper div to keep w-full through small viewports and only switch to w-auto at md.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: modifying the responsive breakpoint for the quiz button to be full-width at xs and sm viewports.
Linked Issues check	✅ Passed	The changes directly address all acceptance criteria from issue #495: changing sm:w-auto to md:w-auto makes the button full-width at xs/sm, w-auto at md+, with lg/xl/2xl unchanged.
Out of Scope Changes check	✅ Passed	The PR contains only the targeted Tailwind class changes to QuizButton.tsx as specified in issue #495, with no unrelated modifications.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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