Adjust QR code centering behaviour on small screens

Author: JustAman62

ui/package-lock.json

@@ -1,15 +1,6 @@
 import { useContext } from "react";
 import { GameContext } from "../GameContext";
-import {
-  Button,
-  Spinner,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeadCell,
-  TableRow,
-} from "flowbite-react";
+import { Button, Spinner, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "flowbite-react";
 import useApiClient from "../useApiClient";
 import GameIdCopyButton from "./common/GameIdCopyButton";
 import QRCode from "react-qr-code";
@@ -22,17 +13,14 @@ export default function WaitingToStartScreen() {
     return <></>;
   }
 
-  const isHost =
-    game.players.find((x) => x.username === username)?.role === "Host";
+  const isHost = game.players.find((x) => x.username === username)?.role === "Host";
 
   return (
-    <div className="flex flex-col max-w-(--breakpoint-md) mx-auto mb-8 items-stretch">
+    <div className="flex flex-col max-w-(--breakpoint-md) mx-auto mb-8 items-stretch px-1">
       <div className="text-center my-4">
         <Spinner />
       </div>
-      <h1 className="text-lg font-semibold self-center mb-5">
-        Waiting for Host to Start Game
-      </h1>
+      <h1 className="text-lg font-semibold self-center mb-5">Waiting for Host to Start Game</h1>
       <div className="flex flex-wrap gap-4 justify-center">
         {/* Players table */}
         <div className="flex-1 min-w-[300px]">
@@ -71,38 +59,29 @@ export default function WaitingToStartScreen() {
             </TableHead>
             <TableBody>
               <TableRow>
-                <TableCell className="items-middle text-center">
-                  <div className="inline-flex items-middle">
+                <TableCell className="flex flex-col items-center gap-4">
+                  <div className="inline-flex items-middle text-center">
                     {!prefs.hideGameId ? (
                       <div>
-                        <span className="py-2 pr-1">Use Game ID </span>
+                        <span className="py-2 pr-1">Use Game ID</span>
                         <GameIdCopyButton className="text-gray-500 hover:bg-gray-100 active:bg-gray-200" />
-                        <span className="py-2 pl-1">
-                          to join or scan QR code
-                        </span>
+                        <span className="py-2 pl-1">to join, or scan the QR code:</span>
                       </div>
                     ) : (
                       <div>
-                        <span className="py-2 pr-1">
-                          Click to copy Game URL{" "}
-                        </span>
+                        <span className="py-2 pr-1">Click to copy Game URL</span>
                         <GameIdCopyButton className="text-gray-500 hover:bg-gray-100 active:bg-gray-200" />
                         <span className="py-2 pl-1"></span>
                       </div>
                     )}
                   </div>
-                  <div>
-                    {!prefs.hideGameId ? (
-                      <TableCell>
-                        <QRCode
-                          style={{ height: "auto", maxWidth: "100%" }}
-                          value={window.location.href + "?gameId=" + game.id}
-                        />
-                      </TableCell>
-                    ) : (
-                      <></>
-                    )}
-                  </div>
+                  {!prefs.hideGameId ? (
+                    <div>
+                      <QRCode style={{ height: "auto", width: "auto" }} value={window.location.href + "?gameId=" + game.id} />
+                    </div>
+                  ) : (
+                    <></>
+                  )}
                 </TableCell>
               </TableRow>
             </TableBody>
@@ -111,12 +90,7 @@ export default function WaitingToStartScreen() {
       </div>
 
       {isHost ? (
-        <Button
-          className="mt-4"
-          color="success"
-          size="lg"
-          onClick={apiClient.startGame}
-        >
+        <Button className="mt-4" color="green" size="lg" onClick={apiClient.startGame}>
           Start Game
         </Button>
       ) : (