Make Scoreboard great again

Author: drcrazy

artifacts/game-client/src/apps/adepts-game/pages/FuneralRoundPage.tsx

@@ -190,19 +190,15 @@ export default function FuneralRoundPage() {
         </aside>
       </div>
 
-      <div className="relative z-[110] grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
-        <div className="min-w-0" aria-hidden="true" />
-        <div className="min-w-0">
-          <Scoreboard
-            players={state.players}
-            onUpdateName={updatePlayerName}
-            onUpdateScore={updatePlayerScore}
-            onResetScores={resetScores}
-            readonly={!isHost}
-            currentTurnSeat={state.currentTurnSeat}
-          />
-        </div>
-        <div className="min-w-0" aria-hidden="true" />
+      <div className="relative z-[110] w-full min-w-0 shrink-0">
+        <Scoreboard
+          players={state.players}
+          onUpdateName={updatePlayerName}
+          onUpdateScore={updatePlayerScore}
+          onResetScores={resetScores}
+          readonly={!isHost}
+          currentTurnSeat={state.currentTurnSeat}
+        />
       </div>
 
       <QuizBoardPandoraLottoOverlay />

artifacts/game-client/src/apps/adepts-game/pages/Home.tsx

@@ -153,9 +153,6 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
   const threeColGridClass = showDonationsTable
     ? "grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]"
     : "grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,0)]";
-  const scoreboardGridClass = showDonationsTable
-    ? "grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]"
-    : "grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,0)]";
 
   return (
     <div className="adepts-quiz-theme h-screen flex flex-col text-foreground overflow-hidden">
@@ -229,23 +226,14 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
         </aside>
       </div>
 
-      <div className={scoreboardGridClass}>
-        <div className="min-w-0" aria-hidden="true" />
-        <div className="min-w-0">
-          <Scoreboard
-            players={state.players}
-            onUpdateName={updatePlayerName}
-            onUpdateScore={updatePlayerScore}
-            onResetScores={resetScores}
-            readonly={!isHost}
-            currentTurnSeat={state.currentTurnSeat}
-          />
-        </div>
-        <div
-          className={
-            showDonationsTable ? "min-w-0" : "w-0 min-w-0 overflow-hidden p-0"
-          }
-          aria-hidden="true"
+      <div className="w-full min-w-0 shrink-0">
+        <Scoreboard
+          players={state.players}
+          onUpdateName={updatePlayerName}
+          onUpdateScore={updatePlayerScore}
+          onResetScores={resetScores}
+          readonly={!isHost}
+          currentTurnSeat={state.currentTurnSeat}
         />
       </div>
 

artifacts/game-client/src/lib/adepts-scoreboard/Scoreboard.tsx

@@ -260,7 +260,7 @@ export function Scoreboard({
       : undefined;
 
   return (
-    <div className="w-screen max-w-[100vw] shrink-0 border-t border-[hsla(275,55%,42%,0.35)] bg-gradient-to-t from-[hsla(278,42%,6%,1)] via-[hsla(274,42%,5%,0.97)] to-[hsla(270,42%,9%,0.92)] py-2 backdrop-blur-md md:py-2.5 ml-[calc(50%-50vw)]">
+    <div className="w-full min-w-0 shrink-0 border-t border-[hsla(275,55%,42%,0.35)] bg-gradient-to-t from-[hsla(278,42%,6%,1)] via-[hsla(274,42%,5%,0.97)] to-[hsla(270,42%,9%,0.92)] py-2 backdrop-blur-md md:py-2.5">
       {!readonly && (
         <div className="mx-auto mb-2 flex w-full max-w-[1080px] justify-end px-2">
           <div className="flex items-center gap-2">