From 88f048b23956716b0b8ed272f86045488d1a27cf Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 28 Jan 2026 15:45:56 +0100
Subject: [PATCH] Refine suggest layout: side-by-side name + form, cards
 underneath

---
 wwwroot/index.html | 40 ++++++++++++++++++++++------------------
 wwwroot/styles.css |  4 ++++
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/wwwroot/index.html b/wwwroot/index.html
index f4b942d..1720e0d 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -16,31 +16,35 @@
   <main class="grid">
     <section class="card" id="actions-card">
       <div id="suggest-view" class="phase-view hidden">
-        <div class="split">
-          <div>
-            <h2>Suggest (up to 3)</h2>
-            <p class="hint">Only you can see your suggestions until Reveal.</p>
-          </div>
-          <div class="name-box">
+        <div class="split wide">
+          <div class="card subcard name-box">
+            <h3>Your Name</h3>
             <label class="stack">
-              <span class="label">Your name</span>
+              <span class="label">Display name</span>
               <input id="name-input" maxlength="64" placeholder="Pick a name" />
             </label>
             <button id="save-name" class="ghost">Save</button>
             <p class="hint" id="player-id"></p>
           </div>
-        </div>
-        <form id="suggest-form" class="stack">
-          <input name="name" required maxlength="100" placeholder="Game name *" />
-          <input name="genre" maxlength="50" placeholder="Genre" />
-          <textarea name="description" maxlength="500" placeholder="Short description"></textarea>
-          <div class="stack horizontal">
-            <input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
-            <input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
+          <div class="card subcard">
+            <h2>Suggest (up to 3)</h2>
+            <p class="hint">Only you can see your suggestions until Reveal.</p>
+            <form id="suggest-form" class="stack">
+              <input name="name" required maxlength="100" placeholder="Game name *" />
+              <input name="genre" maxlength="50" placeholder="Genre" />
+              <textarea name="description" maxlength="500" placeholder="Short description"></textarea>
+              <div class="stack horizontal">
+                <input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
+                <input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
+              </div>
+              <button type="submit">Submit</button>
+            </form>
           </div>
-          <button type="submit">Submit</button>
-        </form>
-        <div id="my-suggestions" class="card-grid"></div>
+        </div>
+        <div class="card subcard">
+          <h3>Your suggestions</h3>
+          <div id="my-suggestions" class="card-grid"></div>
+        </div>
       </div>
 
       <div id="reveal-view" class="phase-view hidden">
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index e5070e8..f3a86bd 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -62,6 +62,10 @@ body {
   flex-wrap: wrap;
 }
 
+.split.wide > .subcard {
+  flex: 1 1 320px;
+}
+
 .name-box {
   min-width: 220px;
   max-width: 260px;