feat: fix mobile height issue

GoogleCloudPlatform · Aug 16, 2023 · 15c62a0 · 15c62a0
1 parent 19090af
commit 15c62a0
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/app-dev/cloud-quiz/app/components/border-countdown-timer.tsx b/app-dev/cloud-quiz/app/components/border-countdown-timer.tsx
@@ -89,7 +89,7 @@ export default function BorderCountdownTimer({ game, children, gameRef }: { game
     font-weight: 700;
     position: relative;
     vertical-align: middle;
-    height: 50vh;
+    height: 50%;
   }
   
   div.timer::before,

diff --git a/app-dev/cloud-quiz/app/components/question-panel.tsx b/app-dev/cloud-quiz/app/components/question-panel.tsx
@@ -77,7 +77,7 @@ export default function QuestionPanel({ game, gameRef, currentQuestion }: { game
             {isShowingCorrectAnswers ? currentQuestion.explanation : (<>[Pick {totalCorrectAnswerOptions}]</>)}
           </h2>
         </BorderCountdownTimer>
-        <center className='hidden bg-gray-100 p-10 h-[50vh] lg:block'>
+        <center className='hidden bg-gray-100 p-10 h-1/2 lg:block'>
           {isPresenter ? (<>
             <div>
               Just getting here?
@@ -104,7 +104,7 @@ export default function QuestionPanel({ game, gameRef, currentQuestion }: { game
           </>)}
         </center>
       </div>
-      <div className="grid grid-rows-4 h-[50vh] lg:h-full">
+      <div className="grid grid-rows-4 h-1/2 lg:h-full">
         {currentQuestion.answers.map((answer, index) => {
           const guessesForThisAnswer = Object.values(currentQuestion.playerGuesses || []).reduce((playerGuesses, guess) => {
             return playerGuesses + (guess[index] ? 1 : 0);