controls component

src/css/browser.css

@@ -7,7 +7,6 @@ iframe.browser {
   background-color: white;
   z-index: 10;
   border: none;
-  margin-top: var(--browser-bar-height);
 }
 
 iframe.browser.fullscreen {
@@ -16,7 +15,7 @@ iframe.browser.fullscreen {
   height: 100%;
 }
 
-[data-mode="tall"] iframe.browser {
+[data-mode="tall"] iframe.browser.active {
   height: 100%;
 }
 
@@ -29,6 +28,7 @@ iframe:focus {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  margin-top: var(--browser-bar-height);
 }
 
 #browser-controls {

src/html/browser/controls.tsx

@@ -0,0 +1,15 @@
+import type { FC } from "hono/jsx"
+
+export const BrowserControls: FC = async () => (
+  <>
+    <div id="browser-controls" style="display:none">
+      <a id="back-button" href="#"></a>
+      <a id="forward-button" href="#"></a>
+      <a id="stop-button" href="#"></a>
+      <a id="reload-button" href="#">@</a>
+      <a id="fullscreen-button" href="#"></a>
+      <a id="close-button" href="#">╳</a>
+      <span id="browser-address">your-app.nose-pluto.local</span>
+    </div>
+  </>
+)

src/html/terminal.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx"
+import { BrowserControls } from "./browser/controls"
 
 export const Terminal: FC = async () => (
   <>
@@ -6,15 +7,7 @@ export const Terminal: FC = async () => (
     <link rel="stylesheet" href="/css/editor.css" />
     <link rel="stylesheet" href="/css/browser.css" />
 
-    <div id="browser-controls" style="display:none">
-      <a id="back-button" href="#"></a>
-      <a id="forward-button" href="#"></a>
-      <a id="stop-button" href="#"></a>
-      <a id="reload-button" href="#">@</a>
-      <a id="fullscreen-button" href="#"></a>
-      <a id="close-button" href="#">╳</a>
-      <span id="browser-address">chris.nose-pluto.local</span>
-    </div>
+    <BrowserControls />
 
     <div id="command-line">
       <span id="command-prompt">&gt;</span>