From e6b341d837fadd8bfbaad276473011d4502eaaa5 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 28 Jan 2026 16:54:52 +0100
Subject: [PATCH] Adjusted name ux

---
 wwwroot/index.html | 24 +++++++++++++-----------
 wwwroot/styles.css | 22 +++++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 8856942..78fd38a 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -8,21 +8,23 @@
 </head>
 <body>
   <div class="status-bar">
-    <span class="status-dot"></span>
-    <span id="phase-pill">Loading…</span>
-    <span class="counts" id="counts">—</span>
-  </div>
-  <div class="name-bar">
-    <label for="name-input" class="label">Name</label>
-    <input id="name-input" maxlength="64" placeholder="Pick a name" />
-    <button id="save-name" class="ghost">Save</button>
-    <span class="hint warning hidden" id="name-warning">Name required</span>
+    <div class="name-bar">
+      <label for="name-input" class="label">Name</label>
+      <input id="name-input" maxlength="64" placeholder="Pick a name" />
+      <button id="save-name" class="ghost">Save</button>
+      <span class="hint warning hidden" id="name-warning">Name required</span>
+    </div>
+    <div class="phase-bar">
+      <span class="status-dot"></span>
+      <span id="phase-pill">Loading…</span>
+      <span class="counts" id="counts">—</span>
+    </div>
   </div>
 
   <main class="grid">
-    <section class="card" id="actions-card">
+    <section id="actions-card">
       <div id="suggest-view" class="phase-view hidden">
-        <div class="card subcard">
+        <div class="card">
           <h2>Suggest (up to 3)</h2>
           <p class="hint">Only you can see your suggestions until Reveal.</p>
           <form id="suggest-form" class="stack">
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 4c04db8..1909e5a 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -10,10 +10,8 @@ body {
 }
 
 .status-bar {
-  display: flex;
+  display: block;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
   background: rgba(15, 23, 42, 0.8);
   border: 1px solid #1f2937;
   border-radius: 10px;
@@ -31,18 +29,20 @@ body {
 .counts {
   color: #9ca3af;
   font-size: 13px;
+  margin-left: 12px;
 }
 
-.name-bar {
+.phase-bar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
-  margin-top: 8px;
-  background: rgba(15, 23, 42, 0.8);
-  border: 1px solid #1f2937;
-  border-radius: 10px;
-  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+}
+.name-bar {
+  display: flex;
+  gap: 10px;
+  padding: 10px 12px;
+  align-items: center;
 }
 .name-bar input { width: 180px; }
 .name-bar .hint { margin: 0; }
@@ -139,6 +139,10 @@ button.ghost {
   min-height: 220px;
 }
 
+.subcard {
+  margin-top: 16px;
+}
+
 .card-visual {
   height: 200px;
   background: linear-gradient(135deg, #1d4ed8, #22c55e);
