From 6e24de448bf2e35907fb83acdae723368912bf0d Mon Sep 17 00:00:00 2001
From: Tobias Baunbaek <freeall@gmail.com>
Date: Fri, 2 Feb 2024 10:54:34 +0100
Subject: [PATCH 1/3] Hide arrows for input

---
 lib/devtools.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/devtools.js b/lib/devtools.js
index 49f9741..e28c5ae 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -30,6 +30,12 @@ customElements.define('developer-tooling', class extends HTMLElement {
           #change-port-show {
             display: none;
           }
+          /* hide up/down arrow for input type=number */
+          input::-webkit-outer-spin-button,
+          input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
 
           .hidden {
             display: none;

From 7977fdab34207981976b7988b8a07179e77a4f46 Mon Sep 17 00:00:00 2001
From: Tobias Baunbaek <freeall@gmail.com>
Date: Fri, 2 Feb 2024 10:55:03 +0100
Subject: [PATCH 2/3] Have min/max ports for change-port field

---
 lib/devtools.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/lib/devtools.js b/lib/devtools.js
index e28c5ae..dce1b0d 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -30,6 +30,10 @@ customElements.define('developer-tooling', class extends HTMLElement {
           #change-port-show {
             display: none;
           }
+          #change-port-input {
+            width: 80px;
+          }
+
           /* hide up/down arrow for input type=number */
           input::-webkit-outer-spin-button,
           input::-webkit-inner-spin-button {
@@ -166,7 +170,13 @@ customElements.define('developer-tooling', class extends HTMLElement {
                   </span>
                   <div>
                     <form id="change-port-form" class="hidden">
-                      <input id="change-port-input" type="number" placeholder="New port" />
+                      <input
+                        id="change-port-input"
+                        type="number"
+                        placeholder="New port"
+                        min="1024"
+                        max="65535"
+                      />
                     </form>
                     <p id="change-port-error"></p>
                   </div>

From 8001e75fdff6c2b7e61b10b8ea8219a6804c0864 Mon Sep 17 00:00:00 2001
From: Tobias Baunbaek <freeall@gmail.com>
Date: Fri, 2 Feb 2024 10:55:32 +0100
Subject: [PATCH 3/3] Fix panels jerking

---
 lib/devtools.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/lib/devtools.js b/lib/devtools.js
index dce1b0d..b24fc70 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -41,6 +41,17 @@ customElements.define('developer-tooling', class extends HTMLElement {
             margin: 0;
           }
 
+          .panels-wrapper {
+            display: flex;
+            gap: 30px;
+          }
+          .panel-left {
+            flex: 1;
+          }
+          .panel-right {
+            width: 400px;
+          }
+
           .hidden {
             display: none;
           }
@@ -80,14 +91,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
             border-radius: 1px;
             white-space: nowrap;
           }
-          #remote-inspect-explain {
-            float:left;
-            max-width:55%;
-          }
-          #remote-inspect {
-            float:right;
-            max-width:40%;
-          }
           #server-message {
             font-size: 0.8rem;
             margin-top: 30px;
@@ -132,8 +135,8 @@ customElements.define('developer-tooling', class extends HTMLElement {
 
         <div>
           <h1>Developer Tooling</h1>
-          <div>
-            <div id="remote-inspect-explain">
+          <div class="panels-wrapper">
+            <div class="panel-left">
               <h2>Remotely inspect Pear applications.</h2>
               <p> Some application setup is required to enable remote debugging </p>
               <p> Install the <code>pear-inspect</code> module into the application </p>
@@ -151,7 +154,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
               <p>When the application is opened in development mode the inspection key will be logged.</p>
               <p>Paste the logged key into the input to add it. Then open in Chrome or copy the URL to a compatible inspect tool to view the remote target.</p>
             </div>
-            <div id="remote-inspect">
+            <div class="panel-right">
               <div>
                 <form id="add-key-form">
                   <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>