Make donations table wider

Author: drcrazy

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

@@ -185,7 +185,7 @@ export default function FuneralRoundPage() {
             ) : null}
           </div>
         </main>
-        <aside className="flex min-h-0 min-w-0 flex-col items-end p-2 pt-3">
+        <aside className="flex min-h-0 min-w-0 flex-col p-2 pt-3">
           <DonationsTable donationLog={state.donationLog} />
         </aside>
       </div>

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

@@ -144,6 +144,16 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
     setActiveQuizCard(null);
   };
 
+  const showDonationsTable =
+    boardId === 3 && state.hideDonationsTableOnBoard3 !== true;
+  /** Third column matches chat (15%) when donations visible; collapsed to 0 otherwise. */
+  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">
       <div style={{ display: "none" }} aria-hidden="true">
@@ -168,7 +178,7 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
         </div>
       </header>
 
-      <div className="grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
+      <div className={threeColGridClass}>
         <aside className="flex min-h-0 min-w-0 flex-col p-2">
           <ChatPanel className="min-h-0 w-full flex-1" />
         </aside>
@@ -189,14 +199,21 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
             />
           </div>
         </main>
-        <aside className="flex min-h-0 min-w-0 flex-col items-end p-2 pt-3">
-          {boardId === 3 && !state.hideDonationsTableOnBoard3 ? (
+        <aside
+          className={
+            showDonationsTable
+              ? "flex min-h-0 min-w-0 flex-col p-2 pt-3"
+              : "pointer-events-none w-0 min-w-0 overflow-hidden p-0"
+          }
+          aria-hidden={!showDonationsTable}
+        >
+          {showDonationsTable ? (
             <DonationsTable donationLog={state.donationLog} />
           ) : null}
         </aside>
       </div>
 
-      <div className="grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
+      <div className={scoreboardGridClass}>
         <div className="min-w-0" aria-hidden="true" />
         <div className="min-w-0">
           <Scoreboard
@@ -208,7 +225,12 @@ export default function Home({ boardId }: { boardId: AdeptsBoardId }) {
             currentTurnSeat={state.currentTurnSeat}
           />
         </div>
-        <div className="min-w-0" aria-hidden="true" />
+        <div
+          className={
+            showDonationsTable ? "min-w-0" : "w-0 min-w-0 overflow-hidden p-0"
+          }
+          aria-hidden="true"
+        />
       </div>
 
       {openCard && (

artifacts/game-client/src/components/DonationsTable.tsx

@@ -12,14 +12,14 @@ export function DonationsTable({ donationLog }: Props) {
 
   return (
     <div
-      className="w-full max-w-[min(100%,14rem)] rounded-lg border-2 border-amber-400/75 bg-gradient-to-b from-amber-950/35 to-black/50 px-2.5 py-2 shadow-[0_0_22px_rgba(250,204,21,0.45),0_0_8px_rgba(251,191,36,0.25)_inset] backdrop-blur-sm"
+      className="w-full min-w-0 rounded-lg border-2 border-amber-400/75 bg-gradient-to-b from-amber-950/35 to-black/50 px-2.5 py-2 shadow-[0_0_22px_rgba(250,204,21,0.45),0_0_8px_rgba(251,191,36,0.25)_inset] backdrop-blur-sm"
       aria-label="Пожертвования игроков"
     >
-      <table className="w-full border-collapse text-left font-display text-[11px] leading-tight sm:text-xs">
+      <table className="w-full table-fixed border-collapse text-left font-display text-[11px] leading-tight sm:text-xs">
         <caption className="sr-only">Журнал пожертвований</caption>
         <thead>
           <tr className="border-b border-amber-500/50 text-amber-100/95">
-            <th scope="col" className="pb-1.5 pr-2 font-semibold tracking-wide">
+            <th scope="col" className="w-[58%] pb-1.5 pr-2 font-semibold tracking-wide">
               Игрок
             </th>
             <th scope="col" className="pb-1.5 font-semibold tracking-wide">
@@ -37,10 +37,10 @@ export function DonationsTable({ donationLog }: Props) {
           ) : (
             rows.map((row) => (
               <tr key={row.id} className="border-b border-white/10 last:border-b-0">
-                <td className="max-w-[5.5rem] truncate py-1 pr-2 text-foreground/95" title={row.name}>
+                <td className="min-w-0 truncate py-1 pr-2 text-foreground/95" title={row.name}>
                   {row.name}
                 </td>
-                <td className="py-1 tabular-nums text-amber-50/95">{row.amount}</td>
+                <td className="whitespace-nowrap py-1 tabular-nums text-amber-50/95">{row.amount}</td>
               </tr>
             ))
           )}