flexing the sizes

Author: grantnelson-wf

playground/internal/react/playground.go

@@ -44,7 +44,11 @@ func playgroundComponent() *Element {
 		Div(Props{
 			`id`: `code-output-box`,
 		},
-			CodeBox(code, setCode),
+			Div(Props{
+				`id`: `code-box-container`,
+			},
+				CodeBox(code, setCode),
+			),
 			OutputBox(output),
 		),
 	)

playground/playground.css

@@ -12,10 +12,6 @@
 	--color-output-error-text: #800;
 	--color-output-error-background: #fcc;
 
-	/* TODO(grantnelson-wf): Should update to more dynamic layout to allow wrapping and remove absolutes. */
-	--height-banner: 50px; /* the amount of the page that the banner will take up */
-	--height-output: 25%; /* the amount of the page that the output box will take up */
-
 	--font-family-banner-title: Arial, sans;
 	--font-size-banner-title: 32px;
 	--font-size-banner-title-sub: 24px;
@@ -68,6 +64,8 @@ html, body {
 /* The part of the banner containing the buttons and controls */
 #controls {
 	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	margin-left: auto;
@@ -146,35 +144,45 @@ html, body {
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
+	box-sizing: border-box;
+	overflow: none;
 }
 
-/* The panel that contains the code text area and the lines numbers */
-#code-box {
+/* A panel containing the code-box used for resizable layout */
+#code-box-container {
 	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);
+	max-height: 80%;
 	height: 75%;
 	flex-shrink: 0;
-	align-items: stretch;
+}
 
+/* 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;
+	overflow: none;
+	resize: none;
+	width: 100%;
+	align-items: stretch;
 	border-top: 1px solid var(--color-code-box-borders);
 	border-bottom: 1px solid var(--color-code-box-borders);
 }
 
 /* The interactable text area for the code */
 #code {
 	flex: 1;
-	float: right;
-	border: none;
-	outline: none;
 	resize: none;
+	box-sizing: border-box;
+	overflow-x: none;
+	overflow-y: scroll;
 	white-space: nowrap;
+	outline: none;
 	border: none;
 	border-left: 1px solid var(--color-code-line-nums-border);
 	padding: var(--padding-mono);
@@ -187,14 +195,13 @@ html, body {
 
 /* The readonly line numbers next to the code */
 #line-nums {
-	background: inherit;
 	text-align: right;
 	user-select: none;
-	white-space: pre-line;
 	overflow: hidden;
 	text-overflow: clip;
 	resize: none;
 	max-width: 4ch;
+	white-space: pre-line;
 	border: none;
 	outline: none;
 	padding: var(--padding-mono);
@@ -209,10 +216,8 @@ html, body {
 	width: 100%;
 	min-height: 50px;
 	flex-grow: 1;
-	flex-shrink: 0;
 	resize: none;
 	box-sizing: border-box;
-
 	overflow: auto;
 	padding: var(--padding-mono);
 	background: var(--color-output-normal-background);