From d9b73479c7f5a1abe8ab39710c956e7702e66c30 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sat, 28 Feb 2026 00:11:20 +0100
Subject: [PATCH] [fix](trx-frontend-http): remove boxed shell and fix auth
 gate

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/index.html   |  8 +++----
 .../trx-frontend-http/assets/web/style.css    | 22 +++++++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 94712c8..dfad33d 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -40,16 +40,16 @@
       </div>
     </div>
     <!-- Auth gate (hidden by default, shown if auth is required) -->
-    <div id="auth-gate" style="display:none; padding: 3rem 2rem; text-align: center;">
+    <div id="auth-gate" style="display:none; max-width: 30rem; margin: 0 auto 0.9rem; padding: 1.25rem 0 1.5rem; text-align: center;">
       <div style="margin-bottom: 1.5rem;">
         <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">Access Required</div>
         <div style="color: var(--text-muted);">Enter passphrase to continue</div>
       </div>
       <form id="auth-form" style="margin: 1.5rem 0;">
-        <input type="password" id="auth-passphrase" placeholder="Passphrase" autocomplete="off" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 0.25rem; background: var(--bg-secondary); color: var(--text); font-size: 1rem; box-sizing: border-box;" />
-        <button type="submit" style="width: 100%; padding: 0.5rem; background: var(--accent-green); color: var(--bg-primary); border: none; border-radius: 0.25rem; font-weight: 600; cursor: pointer; font-size: 1rem; box-sizing: border-box;">Login</button>
+        <input type="password" id="auth-passphrase" placeholder="Passphrase" autocomplete="off" style="width: 100%; padding: 0.65rem 0.75rem; margin-bottom: 1rem; border: 1px solid var(--border-light); border-radius: 0.45rem; background: var(--input-bg); color: var(--text); font-size: 1rem; box-sizing: border-box;" />
+        <button type="submit" style="width: 100%; padding: 0.65rem 0.75rem; background: var(--accent-green); color: #fff; border: none; border-radius: 0.45rem; font-weight: 700; cursor: pointer; font-size: 1rem; box-sizing: border-box;">Login</button>
       </form>
-      <button id="auth-guest-btn" type="button" style="width: 100%; padding: 0.5rem; background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border); border-radius: 0.25rem; font-weight: 600; cursor: pointer; font-size: 1rem; box-sizing: border-box; margin-top: 0.5rem; display: none;">Continue as Guest</button>
+      <button id="auth-guest-btn" type="button" style="width: 100%; padding: 0.65rem 0.75rem; background: var(--btn-bg); color: var(--text); border: 1px solid var(--border-light); border-radius: 0.45rem; font-weight: 600; cursor: pointer; font-size: 1rem; box-sizing: border-box; margin-top: 0.5rem; display: none;">Continue as Guest</button>
       <div id="auth-error" style="color: #ff6b6b; font-size: 0.9rem; margin-top: 1rem; display: none;"></div>
       <div id="auth-role" style="margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; display: none;"></div>
     </div>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 87bde19..a81da7e 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -58,8 +58,22 @@
   --spectrum-bg: #eef3fb;
 }
 
-body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
-.card { border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.75rem; width: 60vw; box-shadow: 0 12px 40px rgba(0,0,0,0.35); background: var(--card-bg); }
+body {
+  font-family: sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  box-sizing: border-box;
+  display: block;
+  background: var(--bg);
+  color: var(--text);
+}
+.card {
+  width: min(100%, 1280px);
+  margin: 0 auto;
+  padding: 0.85rem 1.25rem 1.5rem;
+  background: transparent;
+  box-sizing: border-box;
+}
 .label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; }
 #tab-main .label > span {
   display: inline-block;
@@ -643,11 +657,11 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 
 @media (max-width: 900px) {
-  .card { width: 90vw; }
+  .card { width: 100%; padding-left: 0.9rem; padding-right: 0.9rem; }
 }
 
 @media (max-width: 760px) {
-  .card { padding: 1rem; }
+  .card { padding: 0.7rem 0.7rem 1.1rem; }
   button { min-height: 2.8rem; font-size: 0.95rem; }
   input.status-input, select.status-input { font-size: 1.1rem; }
   .freq-inline { gap: 0.5rem; }