From 739d919ea6c7759d651aecb5ac476a9e942bfb38 Mon Sep 17 00:00:00 2001
From: Hemant Rathore <hemant.rathore@gmail.com>
Date: Tue, 21 Apr 2026 09:36:27 +0000
Subject: [PATCH] feat: mobile/narrow-viewport layout via @media (max-width:
 700px)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a single @media block at the bottom of static/style.css so phones
and narrow tabs get a usable layout without a JS breakpoint framework.

Adjustments at ≤700px:
- tighten header/footer padding and shrink h1 to 15px
- hide decorative labels (.discord-pill, .subtitle, .sender-label,
  .input-hint) that waste horizontal space
- cap #agent-status at 42vw so a long agent list doesn't push the
  settings button off-screen
- shrink .status-pill and .settings-btn paddings
- reduce #timeline and .message padding so chat bubbles have more width
- constrain .chat-bubble to 100vw - 76px (leaves room for avatar + gutter)
- compress the input row: gap 6px, smaller mic/send horizontal padding

No behavior change above 700px. Desktop styling is untouched.
---
 static/style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/static/style.css b/static/style.css
index 0871d58c..c9e9f7d2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4473,3 +4473,78 @@ footer {
     50% { box-shadow: 0 0 8px 2px var(--accent); }
 }
 .help-pulse { animation: helpPulse 1s ease 3; }
+
+/* --- Mobile layout (phone / narrow viewport) --- */
+@media (max-width: 700px) {
+    header {
+        padding: 10px 12px;
+        gap: 8px;
+    }
+
+    .header-left {
+        gap: 8px;
+    }
+
+    header h1 {
+        font-size: 15px;
+    }
+
+    .discord-pill,
+    .subtitle,
+    .sender-label,
+    .input-hint {
+        display: none;
+    }
+
+    #agent-status {
+        gap: 8px;
+        max-width: 42vw;
+    }
+
+    .status-pill {
+        padding: 4px 8px;
+        font-size: 11px;
+    }
+
+    .settings-btn {
+        padding: 5px 6px;
+    }
+
+    main#timeline {
+        padding: 12px 8px;
+    }
+
+    .message {
+        padding-left: 4px;
+        padding-right: 4px;
+        gap: 6px;
+    }
+
+    .chat-bubble {
+        max-width: calc(100vw - 76px);
+        padding: 8px 12px;
+    }
+
+    footer {
+        padding: 10px 12px;
+    }
+
+    #input-row {
+        gap: 6px;
+    }
+
+    #input {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    #mic {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    #send {
+        padding-left: 14px;
+        padding-right: 14px;
+    }
+}