From fa7c97c40203484d2585ccfb62314b3ee9433f14 Mon Sep 17 00:00:00 2001
From: AyoubBenziza <ayoub.cbenziza@gmail.com>
Date: Thu, 11 Jun 2026 15:24:34 +0200
Subject: [PATCH] feat(web): richer desktop layout for end screen and
 back-office
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- end screen: wider container (max-w-4xl), podium/awards stay centered, and the
  two long sections (musiques + récap des manches) sit side-by-side on desktop
- back-office: 2-column layout (form | questions list) on desktop, wider

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/game-end-view.tsx | 23 +++++++++++++++--------
 apps/web/src/pages/admin.tsx              |  6 +++---
 apps/web/src/pages/room.tsx               |  6 +++++-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/game-end-view.tsx b/apps/web/src/components/game-end-view.tsx
index 577f6ef..5e5bd39 100644
--- a/apps/web/src/components/game-end-view.tsx
+++ b/apps/web/src/components/game-end-view.tsx
@@ -180,7 +180,8 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
   const rest = ranked.slice(3)
 
   return (
-    <div className="flex w-full max-w-lg flex-col gap-6 text-center">
+    <div className="flex w-full flex-col items-center gap-6">
+      <div className="flex w-full max-w-xl flex-col gap-6 text-center">
       <header>
         <p className="text-muted-foreground text-xs uppercase">
           Partie terminée
@@ -253,16 +254,22 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
       {gameRecap && gameRecap.length > 0 && (
         <FunStats recap={gameRecap} snapshot={snapshot} />
       )}
+      </div>
 
-      {gameTracks && gameTracks.length > 0 && (
-        <TracksRecap tracks={gameTracks} />
+      {/* Détails (musiques + récap) côte à côte sur desktop. */}
+      {((gameTracks && gameTracks.length > 0) ||
+        (gameRecap && gameRecap.length > 0)) && (
+        <div className="grid w-full gap-6 md:grid-cols-2 md:items-start">
+          {gameTracks && gameTracks.length > 0 && (
+            <TracksRecap tracks={gameTracks} />
+          )}
+          {gameRecap && gameRecap.length > 0 && (
+            <RoundsRecap recap={gameRecap} nameOf={nameOf} playerId={playerId} />
+          )}
+        </div>
       )}
 
-      {gameRecap && gameRecap.length > 0 && (
-        <RoundsRecap recap={gameRecap} nameOf={nameOf} playerId={playerId} />
-      )}
-
-      <div className="flex flex-col gap-2">
+      <div className="flex w-full max-w-sm flex-col gap-2">
         <Button variant="secondary" className="w-full" onClick={copyResults}>
           {copied ? <Check className="text-green-500" /> : <ClipboardList />}
           {copied ? "Copié !" : "Copier les résultats"}
diff --git a/apps/web/src/pages/admin.tsx b/apps/web/src/pages/admin.tsx
index 149b17c..4bf1d3d 100644
--- a/apps/web/src/pages/admin.tsx
+++ b/apps/web/src/pages/admin.tsx
@@ -90,7 +90,7 @@ function AdminPanel({ onLogout }: { onLogout: () => void }) {
     questions.isError && /401|autoris/i.test(String(questions.error))
 
   return (
-    <div className="mx-auto flex min-h-svh w-full max-w-2xl flex-col gap-6 p-6">
+    <div className="mx-auto flex min-h-svh w-full max-w-5xl flex-col gap-6 p-6">
       <header className="flex items-center justify-between">
         <h1 className="font-heading text-2xl font-bold">Back-office quiz</h1>
         <Button size="sm" variant="secondary" onClick={onLogout}>
@@ -106,7 +106,7 @@ function AdminPanel({ onLogout }: { onLogout: () => void }) {
           </button>
         </p>
       ) : (
-        <>
+        <div className="grid gap-6 md:grid-cols-2 md:items-start">
           <QuestionForm
             onCreated={() =>
               qc.invalidateQueries({ queryKey: ["admin-questions"] })
@@ -131,7 +131,7 @@ function AdminPanel({ onLogout }: { onLogout: () => void }) {
               ))}
             </ul>
           </section>
-        </>
+        </div>
       )}
     </div>
   )
diff --git a/apps/web/src/pages/room.tsx b/apps/web/src/pages/room.tsx
index c5238e9..81bfb56 100644
--- a/apps/web/src/pages/room.tsx
+++ b/apps/web/src/pages/room.tsx
@@ -71,7 +71,11 @@ export function RoomPage({ code }: { code: string }) {
       />
       <div
         className={`flex w-full flex-col gap-6 transition-[max-width] ${
-          phase === "lobby" ? "max-w-3xl" : "max-w-lg"
+          phase === "lobby"
+            ? "max-w-3xl"
+            : phase === "ended"
+              ? "max-w-4xl"
+              : "max-w-lg"
         }`}
       >
         <header className="flex items-center justify-between">