A less terrible UI

door-thing-app/src/App.tsx

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