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] 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"/>