From 261a77935f1b4734d180173f5de7045846cd7c0f Mon Sep 17 00:00:00 2001
From: knight <gitea@ghost.tel>
Date: Wed, 5 Nov 2025 00:14:33 -0500
Subject: [PATCH] Add mobile responsiveness to fix query box overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make window full width on mobile (<=768px)
- Stack form controls vertically on small screens
- Fix query input overflow by making it full width
- Stack labels above inputs on mobile
- Make summary sections full width and stack vertically
- Remove side margins on mobile for full screen usage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/style.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/static/style.css b/static/style.css
index 08ddc4e..afbd415 100644
--- a/static/style.css
+++ b/static/style.css
@@ -39,6 +39,50 @@ body {
   margin: 0;
 }
 
+/* Mobile responsiveness */
+@media screen and (max-width: 768px) {
+  .window {
+    margin: 0 !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    min-height: 100vh;
+  }
+
+  .field-row {
+    flex-wrap: wrap;
+  }
+
+  .field-row label {
+    width: 100% !important;
+    margin-bottom: 4px;
+  }
+
+  .field-row input[type="text"],
+  .field-row .channel-dropdown {
+    flex: 1 1 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+    margin-bottom: 8px;
+  }
+
+  .field-row button,
+  .field-row select {
+    margin-left: 0 !important;
+    margin-bottom: 8px;
+  }
+
+  .summary-row {
+    flex-direction: column;
+  }
+
+  .summary-left,
+  .summary-right {
+    max-width: 100%;
+    min-width: 100%;
+  }
+}
+
 /* Channel dropdown custom styling */
 .channel-dropdown {
   position: relative;