From 185cfaf20fdb8f761ca17e8425cfe46ec4ccd118 Mon Sep 17 00:00:00 2001
From: Kneesal <nisalcottingham@gmail.com>
Date: Tue, 17 Mar 2026 14:14:07 +1300
Subject: [PATCH 1/2] fix(web): make quiz button full width at xs and sm
 viewports

Change sm:w-auto to md:w-auto so the button stays 100% width through
the sm breakpoint and only shrinks at md and above.

Resolves #495

Made-with: Cursor
---
 apps/web/src/components/sections/QuizButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/sections/QuizButton.tsx b/apps/web/src/components/sections/QuizButton.tsx
index cacadea7..11352a5c 100644
--- a/apps/web/src/components/sections/QuizButton.tsx
+++ b/apps/web/src/components/sections/QuizButton.tsx
@@ -20,7 +20,7 @@ export function QuizButton({ data }: QuizButtonProps): ReactElement {
 
   return (
     <>
-      <div className="mx-auto w-full px-6 pt-12 sm:w-auto lg:w-1/2 lg:px-8 xl:w-1/2 2xl:w-2xl">
+      <div className="mx-auto w-full px-6 pt-12 md:w-auto lg:w-1/2 lg:px-8 xl:w-1/2 2xl:w-2xl">
         <button
           onClick={() => setOpen(true)}
           className="animate-mesh-gradient hover:animate-mesh-gradient-fast group relative w-full overflow-hidden rounded-lg bg-linear-to-tr from-yellow-500 via-amber-500 to-red-700 bg-size-[400%_400%] bg-blend-multiply text-white shadow-lg hover:bg-orange-500"

From c1b93373ccf70b413b10bcbf7c9f59fe087b420a Mon Sep 17 00:00:00 2001
From: Kneesal <nisalcottingham@gmail.com>
Date: Tue, 17 Mar 2026 14:51:36 +1300
Subject: [PATCH 2/2] fix(web): remove quiz button padding to align with parent
 section

Drop px-6 from the QuizButton wrapper so it inherits the parent
Section's px-4/sm:px-8/lg:px-10 padding at xs and sm viewports,
keeping the button edges aligned with sibling content.

Made-with: Cursor
---
 apps/web/src/components/sections/QuizButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/sections/QuizButton.tsx b/apps/web/src/components/sections/QuizButton.tsx
index 11352a5c..9807de6e 100644
--- a/apps/web/src/components/sections/QuizButton.tsx
+++ b/apps/web/src/components/sections/QuizButton.tsx
@@ -20,7 +20,7 @@ export function QuizButton({ data }: QuizButtonProps): ReactElement {
 
   return (
     <>
-      <div className="mx-auto w-full px-6 pt-12 md:w-auto lg:w-1/2 lg:px-8 xl:w-1/2 2xl:w-2xl">
+      <div className="mx-auto w-full pt-12 md:w-auto lg:w-1/2 lg:px-8 xl:w-1/2 2xl:w-2xl">
         <button
           onClick={() => setOpen(true)}
           className="animate-mesh-gradient hover:animate-mesh-gradient-fast group relative w-full overflow-hidden rounded-lg bg-linear-to-tr from-yellow-500 via-amber-500 to-red-700 bg-size-[400%_400%] bg-blend-multiply text-white shadow-lg hover:bg-orange-500"