From cc30b13383b196cb7d101e415a58aaf4e12b58af Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Mon, 19 Jan 2026 15:18:42 -0700
Subject: [PATCH] Make mobile smaller

---
 components/QuestionCard.tsx | 16 ++++++++--------
 components/QuizEditor.tsx   | 22 +++++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/QuestionCard.tsx b/components/QuestionCard.tsx
index b3c35b5..7e4ff04 100644
--- a/components/QuestionCard.tsx
+++ b/components/QuestionCard.tsx
@@ -58,7 +58,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
       }`}
     >
       <div 
-        className="flex items-center gap-3 p-4 cursor-pointer"
+        className="flex items-center gap-2 md:gap-3 p-2 md:p-4 cursor-pointer"
         onClick={onToggleExpand}
       >
         <div 
@@ -68,7 +68,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
           <GripVertical size={20} />
         </div>
         
-        <div className="flex-shrink-0 w-8 h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-sm">
+        <div className="flex-shrink-0 w-6 h-6 md:w-8 md:h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-xs md:text-sm">
           {index + 1}
         </div>
         
@@ -77,7 +77,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
         </div>
         
         {correctOption && (
-          <div className={`flex-shrink-0 px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1.5 ${colorMap[correctOption.color]}`}>
+          <div className={`flex-shrink-0 px-2 md:px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1 md:gap-1.5 ${colorMap[correctOption.color]}`}>
             <ShapeIcon shape={correctOption.shape} className="fill-current" />
             <span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span>
           </div>
@@ -111,21 +111,21 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
             transition={{ duration: 0.2 }}
             className="overflow-hidden"
           >
-            <div className="px-4 pb-4 pt-0 border-t-2 border-gray-50">
-              <p className="text-gray-700 font-medium py-3">{question.text}</p>
+            <div className="px-2 md:px-4 pb-2 md:pb-4 pt-0 border-t-2 border-gray-50">
+              <p className="text-gray-700 font-medium py-2 md:py-3 text-sm md:text-base">{question.text}</p>
               
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {question.options.map((option, idx) => (
                   <div
                     key={idx}
-                    className={`p-3 rounded-xl border-2 ${
+                    className={`p-2 md:p-3 rounded-xl border-2 ${
                       option.isCorrect 
                         ? 'border-green-500 bg-green-50' 
                         : 'border-gray-200 bg-gray-50'
                     }`}
                   >
                     <div className="flex items-center gap-2">
-                      <div className={`w-6 h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
+                      <div className={`w-5 h-5 md:w-6 md:h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
                         <ShapeIcon shape={option.shape} className="text-white fill-white" />
                       </div>
                       <span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}>
@@ -138,7 +138,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
                       )}
                     </div>
                     {option.reason && (
-                      <p className="text-xs text-gray-500 mt-2 pl-8">{option.reason}</p>
+                      <p className="text-xs text-gray-500 mt-1 md:mt-2 pl-8">{option.reason}</p>
                     )}
                   </div>
                 ))}
diff --git a/components/QuizEditor.tsx b/components/QuizEditor.tsx
index 718da13..9eff413 100644
--- a/components/QuizEditor.tsx
+++ b/components/QuizEditor.tsx
@@ -163,13 +163,13 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
   };
 
   return (
-    <div className="h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center overflow-hidden">
+    <div className="h-screen bg-gray-100 text-gray-900 p-2 md:p-8 flex flex-col items-center overflow-hidden">
       <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white flex-1 min-h-0 flex flex-col">
-        <div className="bg-theme-primary p-6 text-white relative overflow-hidden">
+        <div className="bg-theme-primary p-3 md:p-6 text-white relative overflow-hidden">
           <div className="relative z-10 flex items-center justify-between gap-4">
             <button
               onClick={onBack}
-              className="bg-white/20 p-2 rounded-full hover:bg-white/30 transition"
+              className="bg-white/20 p-1.5 md:p-2 rounded-full hover:bg-white/30 transition"
             >
               <ArrowLeft size={24} />
             </button>
@@ -183,13 +183,13 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
                   onBlur={() => setTitleEditing(false)}
                   onKeyDown={(e) => e.key === 'Enter' && setTitleEditing(false)}
                   autoFocus
-                  className="bg-white/20 text-white text-2xl md:text-3xl font-black text-center w-full max-w-md px-4 py-2 rounded-xl outline-none placeholder:text-white/50"
+                  className="bg-white/20 text-white text-xl md:text-3xl font-black text-center w-full max-w-md px-2 md:px-4 py-1 md:py-2 rounded-xl outline-none placeholder:text-white/50"
                   placeholder="Quiz Title"
                 />
               ) : (
                 <h1
                   onClick={() => setTitleEditing(true)}
-                  className="text-2xl md:text-3xl font-black cursor-pointer hover:bg-white/10 px-4 py-2 rounded-xl transition inline-block"
+                  className="text-xl md:text-3xl font-black cursor-pointer hover:bg-white/10 px-2 md:px-4 py-1 md:py-2 rounded-xl transition inline-block"
                 >
                   {quiz.title || 'Untitled Quiz'}
                 </h1>
@@ -203,7 +203,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
               <button
                 onClick={() => onSave({ ...quiz, config })}
                 disabled={isSaving}
-                className="bg-white/20 p-2 rounded-full hover:bg-white/30 transition disabled:opacity-50"
+                className="bg-white/20 p-1.5 md:p-2 rounded-full hover:bg-white/30 transition disabled:opacity-50"
                 title="Save to library"
               >
                 <Save size={24} />
@@ -219,7 +219,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
         <div className="flex bg-white border-b border-gray-100">
           <button
             onClick={() => setActiveTab('questions')}
-            className={`flex-1 py-3 font-bold text-center border-b-2 transition-all ${
+            className={`flex-1 py-2 md:py-3 font-bold text-center border-b-2 transition-all ${
               activeTab === 'questions'
                 ? 'border-theme-primary text-theme-primary bg-theme-primary/5'
                 : 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50'
@@ -232,7 +232,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
           </button>
           <button
             onClick={() => setActiveTab('settings')}
-            className={`flex-1 py-3 font-bold text-center border-b-2 transition-all ${
+            className={`flex-1 py-2 md:py-3 font-bold text-center border-b-2 transition-all ${
               activeTab === 'settings'
                 ? 'border-theme-primary text-theme-primary bg-theme-primary/5'
                 : 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50'
@@ -245,7 +245,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
           </button>
         </div>
 
-        <div className="p-6 space-y-4 flex-1 min-h-0 overflow-y-auto">
+        <div className="p-3 md:p-6 space-y-4 flex-1 min-h-0 overflow-y-auto">
           {activeTab === 'questions' ? (
             <>
               <div className="flex items-center justify-between">
@@ -305,11 +305,11 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
           )}
         </div>
 
-        <div className="p-6 bg-gray-50 border-t-2 border-gray-100 space-y-4">
+        <div className="p-3 md:p-6 bg-gray-50 border-t-2 border-gray-100 space-y-4">
           <button
             onClick={handleStartGame}
             disabled={!canStartGame}
-            className="w-full bg-green-500 text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#16a34a] active:shadow-none active:translate-y-[6px] transition-all hover:bg-green-600 flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:translate-y-0 disabled:active:shadow-[0_6px_0_#16a34a]"
+            className="w-full bg-green-500 text-white py-3 md:py-4 rounded-2xl text-lg md:text-xl font-black shadow-[0_6px_0_#16a34a] active:shadow-none active:translate-y-[6px] transition-all hover:bg-green-600 flex items-center justify-center gap-2 md:gap-3 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:translate-y-0 disabled:active:shadow-[0_6px_0_#16a34a]"
           >
             <Play size={24} fill="currentColor" /> Start Game with {quiz.questions.length} Questions
           </button>