From 00d56791ea62d73549153607c78135906afb1553 Mon Sep 17 00:00:00 2001
From: appletalk <4085979+appletalk@users.noreply.github.com>
Date: Thu, 4 Jun 2026 19:12:58 -0700
Subject: [PATCH] html: fit long IPv6 addresses in hero field

The IP input had a fixed 2.5rem font and 75% width, so full IPv6
addresses overflowed and were truncated. Use full width and shrink
the font to fit, keeping IPv4 addresses at the larger size.
---
 html/index.html  | 19 +++++++++++++++++++
 html/styles.html |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/html/index.html b/html/index.html
index dc4ecec..cb125b2 100644
--- a/html/index.html
+++ b/html/index.html
@@ -294,5 +294,24 @@ <h2>FAQ</h2>
       </footer>
 
     </div>
+    <script>
+      // Shrink the IP field's font size so long IPv6 addresses fit on any screen.
+      (function () {
+        var input = document.querySelector('.ip-input');
+        if (!input) return;
+        var maxSize = 2.5; // rem
+        var minSize = 0.85; // rem
+        function fit() {
+          var size = maxSize;
+          input.style.fontSize = size + 'rem';
+          while (input.scrollWidth > input.clientWidth && size > minSize) {
+            size -= 0.05;
+            input.style.fontSize = size + 'rem';
+          }
+        }
+        fit();
+        window.addEventListener('resize', fit);
+      })();
+    </script>
   </body>
 </html>
diff --git a/html/styles.html b/html/styles.html
index 5515cc4..317b30b 100644
--- a/html/styles.html
+++ b/html/styles.html
@@ -154,7 +154,8 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     text-align: center;
-    width: 75%;
+    width: 100%;
+    max-width: 100%;
     padding: 0.35rem 0.75rem;
     outline: none;
     transition: border-color 0.15s;