Fixed a display issue for long ipv6 addresses and port input on mobile

Makefile

@@ -71,4 +71,4 @@ endif
 	@sha256sum $(GOPATH)/bin/$(XBIN)
 
 run:
-	go run cmd/echoip/main.go -a data/asn.mmdb -c data/city.mmdb -f data/country.mmdb -H x-forwarded-for -r -s
+	go run cmd/echoip/main.go -a data/asn.mmdb -c data/city.mmdb -f data/country.mmdb -H x-forwarded-for -r -s -p

html/index.html

@@ -200,52 +200,52 @@
             </p>
             <div class="pure-form">
               <!-- COMMAND WIDGET -->
-              <div class="buttons">
+              <div class="input-buttons">
                 <button
                   name="ip"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   ip
                 </button>
                 <button
                   name="country"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   country
                 </button>
                 <button
                   name="country-iso"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   country-iso
                 </button>
                 <button
                   name="city"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   city
                 </button>
                 <button
                   name="asn"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   asn
                 </button>
                 <button
                   name="json"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   json
                 </button>
                 <button
                   name="port"
-                  class="button widget-select"
+                  class="pure-button widget-select"
                   onclick="changeInput(this.name, this)"
                 >
                   port
@@ -266,12 +266,13 @@
               </div>
               <div id="output" class="widgetbox output"></div>
 
-              <form class="pure-form">
+              <form class="pure-form input-buttons">
                 <fieldset>
-                  <label for="ipCheckBox">
+                  <label for="ipInput">
+                    Check another IP (optional)
                     <input
                       id="ipInput"
-                      class="medium-input pure-input"
+                      class=""
                       type="text"
                       placeholder="IP to query"
                       onkeyup="updateIP(this.value)"

html/script.html

@@ -71,7 +71,6 @@
   function navigate(event) {
     console.log("navigate", compositePath)
     window.location = compositePath
-    event.preventDefault()
   }
 
   function updatePort(value) {

html/styles.html

@@ -26,6 +26,7 @@
     background: #f2f2f2;
     font-size: 36px;
     padding: 6px;
+    word-wrap: break-word;
   }
   svg.github-corner {
     fill: #151513;
@@ -88,11 +89,6 @@
     text-align: right;
   }
 
-  .narrow-input {
-    width: 5.5em;
-    margin-top: 0.2em;
-  }
-
   .medium-input {
     width: 10em;
   }
@@ -101,6 +97,11 @@
     background-color: rgb(208 208 208);
   }
 
+  .input-buttons {
+    line-height: 2.6em;
+    font-size: smaller;
+  }
+
   /* POST CORRECTION */
   .leafcloud-logo .letters {
     fill: black;