From 3f2c59c5bb29ed4536a328b58c43a2f988fc0a5c Mon Sep 17 00:00:00 2001
From: Karl <karl@k-world.me.uk>
Date: Wed, 4 Jun 2025 10:03:44 +0100
Subject: [PATCH] add mobile better mobile support

---
 templates/index.html | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 3587312..b52a9df 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -57,15 +57,6 @@
             /* NEW: allow scrolling */
         }
 
-        /* Optional: Adjust height for smaller screens */
-        @media (max-width: 768px) {
-            .prompt {
-                max-height: 25vh;
-                /* even smaller on mobile */
-            }
-        }
-
-
         .button-group {
             display: flex;
             gap: 20px;
@@ -102,6 +93,34 @@
             pointer-events: none;
             opacity: 0.6;
         }
+
+        @media (max-width: 768px) {
+            .image-container {
+                max-width: 100vw;
+                max-height: 50vh;
+            }
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .prompt {
+                max-height: 20vh;
+                font-size: 14px;
+                padding: 10px 15px;
+            }
+
+            .button-group {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .button-link {
+                font-size: 14px;
+                padding: 8px 16px;
+            }
+        }
     </style>
     <script>
         setInterval(() => {