flexing the sizes

grantnelson-wf · grantnelson-wf · commit f299ec2f9093 · 2025-11-17T09:54:11.000-07:00
diff --git a/playground/index.html b/playground/index.html
@@ -14,6 +14,6 @@
     <script src="playground.js" defer></script>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="playground"></div>
   </body>
 </html>
diff --git a/playground/internal/react/playground.go b/playground/internal/react/playground.go
@@ -27,9 +27,7 @@ func playgroundComponent() *Element {
 		print("Share clicked") // TODO(grantnelson-wf): Implement
 	}
 
-	return Div(Props{
-		`id`: `playground`,
-	},
+	return Fragment(
 		Div(Props{
 			`id`: `banner`,
 		},
@@ -43,7 +41,11 @@ func playgroundComponent() *Element {
 				ShareUrlControl(shareUrl, onShareClick),
 			),
 		),
-		CodeBox(code, setCode),
-		OutputBox(output),
+		Div(Props{
+			`id`: `code-output-box`,
+		},
+			CodeBox(code, setCode),
+			OutputBox(output),
+		),
 	)
 }
diff --git a/playground/playground.css b/playground/playground.css
@@ -23,25 +23,30 @@
 	/* "mono" applies to mono-space text boxes, i.e. code, line number, and output */
 	--font-family-mono: Menlo, Courier\ New, monospace;
 	--font-size-mono: 11pt;
-    --padding-mono: 5px;
+	--padding-mono: 5px;
 	--tab-size-code-text: 4;
 }
 
-body {
+html, body {
 	width: 100%;
 	height: 100%;
 	margin: 0;
 	padding: 0;
+	box-sizing: border-box;
+}
+
+#playground {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
 }
 
 #banner {
-	position: absolute;
-	top: 0;
-	bottom: calc(100% - var(--height-banner));
-	left: 0;
-	right: 0;
 	display: flex;
+	flex-wrap: wrap;
 	flex-direction: row;
+	flex-shrink: 0;
 	align-items: stretch;
 	padding: 4px;
 	background: var(--color-banner-background);
@@ -136,16 +141,28 @@ body {
 	display: none;
 }
 
+/* The panel that contains everything below the banner */
+#code-output-box{
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
 /* The panel that contains the code text area and the lines numbers */
 #code-box {
 	display: flex;
 	flex-direction: row;
+	flex-grow: 1;
+	box-sizing: border-box;
+	resize: vertical;
+	overflow: auto;
+	width: 100%;
+	min-height: 50px;
+	max-height: calc(100%-50px);
+	height: 75%;
+	flex-shrink: 0;
 	align-items: stretch;
-	position: absolute;
-	top: var(--height-banner);
-	right: 0;
-	bottom: var(--height-output);
-	left: 0;
+
 	border-top: 1px solid var(--color-code-box-borders);
 	border-bottom: 1px solid var(--color-code-box-borders);
 }
@@ -189,12 +206,14 @@ body {
 
 /* The readonly box that contains all the output */
 #output-box {
-	position: absolute;
+	width: 100%;
+	min-height: 50px;
+	flex-grow: 1;
+	flex-shrink: 0;
+	resize: none;
+	box-sizing: border-box;
+
 	overflow: auto;
-	top: calc(100% - var(--height-output));
-	right: 0;
-	bottom: 0;
-	left: 0;
 	padding: var(--padding-mono);
 	background: var(--color-output-normal-background);
 }
diff --git a/playground/playground.go b/playground/playground.go
@@ -5,7 +5,7 @@ import (
 )
 
 func main() {
-	root := react.CreateRoot(`root`)
+	root := react.CreateRoot(`playground`)
 	root.Render(react.StrictMode(
 		react.Playground(),
 	))
diff --git a/playground/playground.js b/playground/playground.js

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import (`
`5`	`5`	`)`
`6`	`6`
`7`	`7`	`func main() {`
`8`		- root := react.CreateRoot(`root`)
	`8`	+ root := react.CreateRoot(`playground`)
`9`	`9`	`root.Render(react.StrictMode(`
`10`	`10`	`react.Playground(),`
`11`	`11`	`))`