From de2b094adfe933a636565e6cce6a9ffe57065b0a Mon Sep 17 00:00:00 2001
From: appletalk <4085979+appletalk@users.noreply.github.com>
Date: Sat, 5 Sep 2026 08:49:05 -0700
Subject: [PATCH] html: fit long IPv6 addresses in hero field

Uncompressed IPv6 addresses did not fit in the IP field and were cut off.

The template now sets the length of the address as a CSS variable on the
field, and the font size is derived from that and the width of the form
using container query units. IPv4 addresses keep their current size and
the field never grows past 75% of the hero, so it stays clear of the
sponsor logo. Browsers without container query support fall back to the
fixed size.
---
 html/index.html  |  4 ++--
 html/styles.html | 28 ++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/html/index.html b/html/index.html
index 5720068b..27ba2dc8 100644
--- a/html/index.html
+++ b/html/index.html
@@ -33,11 +33,11 @@
         <h1 class="site-title">❯ curl {{ .Host }}</h1>
         {{ if .NoCustomIP }}
         <div class="ip-form">
-          <input class="ip-input" type="text" value="{{ .IP }}" readonly>
+          <input class="ip-input" type="text" value="{{ .IP }}" readonly style="--ip-chars: {{ len .IP.String }}">
         </div>
         {{ else }}
         <form class="ip-form" action="/" method="GET">
-          <input class="ip-input" type="text" name="ip" value="{{ .IP }}">
+          <input class="ip-input" type="text" name="ip" value="{{ .IP }}" style="--ip-chars: {{ len .IP.String }}">
           <div class="ip-buttons">
             <button class="ip-button" type="submit">Lookup IP address</button>
             {{ if .ExplicitLookup }}
diff --git a/html/styles.html b/html/styles.html
index 5515cc42..5b82b566 100644
--- a/html/styles.html
+++ b/html/styles.html
@@ -142,11 +142,14 @@
     flex-direction: column;
     align-items: center;
     gap: 0.75rem;
+    width: 75%;
+    margin: 0 auto;
   }
 
   .ip-input {
+    --ip-font-max: 2.5rem;
     font-family: 'JetBrains Mono', monospace;
-    font-size: 2.5rem;
+    font-size: var(--ip-font-max);
     font-weight: 600;
     line-height: 1.2;
     color: var(--ip-color);
@@ -154,12 +157,25 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     text-align: center;
-    width: 75%;
+    width: 100%;
     padding: 0.35rem 0.75rem;
     outline: none;
     transition: border-color 0.15s;
   }
 
+  /* Scale the font down so that long IPv6 addresses fit. --ip-chars is the
+     length of the address and is set by the template. Monospace glyphs are
+     about 0.6em wide. */
+  @supports (font-size: 1cqw) {
+    .ip-form {
+      container-type: inline-size;
+    }
+
+    .ip-input {
+      font-size: min(var(--ip-font-max), calc((100cqw - 1.75rem) / (var(--ip-chars, 15) * 0.62)));
+    }
+  }
+
   .ip-input:focus {
     border-color: var(--accent);
   }
@@ -422,12 +438,16 @@
       grid-template-columns: 1fr;
     }
 
+    .ip-form {
+      width: 100%;
+    }
+
     .ip-input {
-      font-size: 1.5rem;
+      --ip-font-max: 1.5rem;
     }
 
     .hero {
-      padding: 2rem 0;
+      padding: 2rem 1rem;
     }
 
     .sponsor-logo {