A less terrible UI

door-thing-app/src/App.tsx

@@ -120,23 +120,30 @@ export function App() {
   };
 
   return (
-    <div>
+    <div class="connectionBar">
+      <div class="autoconnectSwitch">
+        Autoconnect:
         <input
           onChange={onAutoConnectChange}
           checked={autoConnect}
           type="checkbox"
         />
+      </div>
+      <div class="connectionStatus">
         {connecting && !device && <span>Trying to connect</span>}
         {device == null && !connecting && (
           <button onClick={tryConnect}>Connect</button>
         )}
         {device && (
           <>
-          <span>connected</span>
+            <span>Connected </span>
             <button onClick={onDisconnectClick}>Disconnect</button>
-          {doorOpen != null && <span>{doorOpen ? "open" : "closed"}</span>}
           </>
         )}
       </div>
+      <div>
+        {doorOpen != null && <span>Door: {doorOpen ? "open" : "closed"}</span>}
+      </div>
+    </div>
   );
 }

door-thing-app/src/index.css

@@ -1,7 +1,24 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
   margin: auto;
   max-width: 38rem;
   padding: 2rem;
 }
+
+.connectionBar {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.autoconnectSwitch {
+  width: 100%;
+}
+
+.connectionStatus {
+  width: 100%;
+}
+
+.connectionBar >* {
+  height: 2rem;
+}