From 9eb3cf10be4988d9cbc634a065f3cc90ffd55fd9 Mon Sep 17 00:00:00 2001 From: jwinterm Date: Sun, 12 Jul 2026 15:54:49 -0400 Subject: [PATCH] =?UTF-8?q?feat(ui):=20bottom=20console=20=E2=80=94=20chat?= =?UTF-8?q?=20log=20+=20command=20input=20under=20the=20game=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Roguelike layout on desktop: sidebar left, play area filling the top, and the message log (row 3, 132px) + command input (row 4) span full-width BELOW the game. The chat panel flips from a left-column (border-right) to a bottom bar (border-top); the sidebar now scrolls if its controls are tall. Mobile (<=820px) keeps its existing single-column stack untouched. --- html/styles/stylesheet.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/html/styles/stylesheet.css b/html/styles/stylesheet.css index ac32ee4..9879c0f 100644 --- a/html/styles/stylesheet.css +++ b/html/styles/stylesheet.css @@ -62,14 +62,16 @@ body { /* Updated layout with 5-row structure */ .container { display: grid; + /* Roguelike layout: sidebar on the left, the play area filling the top, and a bottom + CONSOLE (chat log + command input) spanning the full width beneath it. */ grid-template-areas: "header header header" "status game game" - "chat game game" + "chat chat chat" "input input input" "footer footer footer"; - grid-template-columns: 350px 1fr 1fr; - grid-template-rows: auto auto 1fr auto auto; + grid-template-columns: 300px 1fr 1fr; + grid-template-rows: auto 1fr 132px auto auto; height: 100vh; width: 100%; max-width: 100vw; @@ -112,6 +114,8 @@ body { justify-content: flex-start; border-right: 1px solid var(--rule); box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.45); + overflow-y: auto; /* it now only spans the game row — scroll if the controls are tall */ + min-height: 0; } /* Torch-lit accent bar running down the console's leading edge. */ @@ -332,7 +336,7 @@ body { background-color: var(--bg-panel); display: flex; flex-direction: column; - border-right: 1px solid var(--rule); + border-top: 1px solid var(--rule); /* bottom console bar, not a left column */ overflow: hidden; /* Prevents chat from causing scrolling */ }