From 5e2d0bc673b7ac2cebc3bb9f3b9b30cbc19eba7f Mon Sep 17 00:00:00 2001
From: srdusr <99972264+srdusr@users.noreply.github.com>
Date: Mon, 22 Dec 2025 14:09:00 +0200
Subject: Fix the room code field and give the multiplayer screen a close
 control

- The room code field was a 94px box with a clipped placeholder: twice the
  height of the name field above it, and the largest control on the screen
  for the smallest input on it. align-items: stretch was inflating it from a
  natural 46px, and the field was sized to whatever width was going rather
  than to the five characters a code actually is. It is now 9ch wide and
  matches the height of the Join button beside it, which is sized to match it
  in turn rather than being a full-size action.
- The multiplayer screen was the only one reachable from the rails without a
  close control. Both of its views have one now.
---
 web/src/screens/multiplayerScreen.js |  5 ++++-
 web/src/styles.css                   | 31 ++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 10 deletions(-)

(limited to 'web')

diff --git a/web/src/screens/multiplayerScreen.js b/web/src/screens/multiplayerScreen.js
index 073d3cc..7292bcc 100644
--- a/web/src/screens/multiplayerScreen.js
+++ b/web/src/screens/multiplayerScreen.js
@@ -1,4 +1,5 @@
 import { escapeHtml } from '../util.js';
+import { CLOSE_ICON } from './icons.js';
 import { renderCornerRail } from '../cornerRail.js';
 import { attachTooltips } from '../tooltip.js';
 import { renderTopRail } from '../topRail.js';
@@ -70,6 +71,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
         let deviceFilter = 'everyone';
         root.innerHTML = `
             <div class="stats-screen">
+                <button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
                 <div class="logo" data-action="menu">TyperPunk</div>
                 <h2>Multiplayer</h2>
                 <div class="account-panel">
@@ -80,7 +82,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
                     <div class="mp-divider"><span>or race friends</span></div>
 
                     <div class="mp-code-row">
-                        <input class="account-input" type="text" id="mp-room-code" placeholder="Enter a room code" maxlength="5" autocomplete="off" spellcheck="false">
+                        <input class="account-input" type="text" id="mp-room-code" placeholder="CODE" maxlength="5" autocomplete="off" spellcheck="false">
                         <button class="menu-button" data-action="join">Join</button>
                     </div>
                     <button class="menu-button ghost" data-action="create" data-tooltip="Opens an empty room and gives you a code to share.">Create a Room</button>
@@ -157,6 +159,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
     function renderLobby(roomCode, auto = false) {
         root.innerHTML = `
             <div class="stats-screen">
+                <button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
                 <div class="logo" data-action="menu">TyperPunk</div>
                 <h2>${auto ? 'Finding a race' : `Room ${escapeHtml(roomCode)}`}</h2>
                 <div class="settings-hint">${auto
diff --git a/web/src/styles.css b/web/src/styles.css
index 3e4aea4..9d47c68 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2133,25 +2133,38 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     min-width: 0;
 }
 
-/* Sized to the five characters a room code actually is, rather than eating
-   whatever width was going. The Join button matches the field's height and
-   the weight of the other actions on the screen - as a `small ghost` it
-   read as an afterthought next to the field it belongs to. */
+/* A room code is five characters, so the field is sized for five characters.
+   Stretched across the row it was a 94px-tall box with a clipped placeholder,
+   twice the height of the name field directly above it and the largest
+   control on the screen for the smallest input on it.
+
+   align-items: center rather than stretch: stretch is what inflated it, and
+   nothing in this row wants to match its neighbour's height by growing. */
+.mp-code-row {
+    justify-content: center;
+    align-items: center;
+}
+
 .mp-code-row .account-input {
-    flex: 1 1 auto;
-    min-width: 0;
+    flex: 0 0 auto;
+    width: 9ch;
+    height: 2.75rem;
+    padding: 0 0.5rem;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 3px;
+    letter-spacing: 2px;
     font-size: 1.1rem;
 }
 
 .mp-code-row .menu-button {
     flex: 0 0 auto;
     min-width: 0;
+    height: 2.75rem;
+    padding: 0 1.5rem;
+    font-size: 0.95rem;
     white-space: nowrap;
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
+    display: inline-flex;
+    align-items: center;
 }
 
 /* A labelled rule, so the two ways into a race read as alternatives rather
-- 
cgit v1.2.3