use a vertical orientation for Run page

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/page/Run.css

@@ -1,9 +1 @@
 @import "../view/term/RunTerminal.css";
-
-.pdl-run-page-section {
-  .pdl-run-split-item-card-header,
-  .pdl-run-split-item-card-body {
-    padding-inline-start: 0;
-    padding-right: 0;
-  }
-}

pdl-live-react/src/page/Run.tsx

@@ -11,8 +11,6 @@ import {
   CardHeader,
   CardTitle,
   PageSection,
-  Flex,
-  FlexItem,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -88,51 +86,7 @@ export default function Run() {
 
   return (
     <Page breadcrumb1="Run">
-      <PageSection className="pdl-run-page-section">
-        <Flex>
-          <FlexItem flex={{ default: "flex_1" }}>
-            <Card isPlain>
-              <CardHeader className="pdl-run-split-item-card-header">
-                <CardTitle>Program</CardTitle>
-              </CardHeader>
-              <CardBody className="pdl-run-split-item-card-body">
-                <div style={{ height: "600px" }}>
-                  <CodeEditor
-                    onEditorDidMount={(editor, _monaco) => {
-                      editor.layout()
-                    }}
-                    options={{ fontSize: 16 }}
-                    aria-label="text area to provide PDL program source"
-                    code={initialInput}
-                    isDarkTheme
-                    isFullHeight
-                    language={Language.yaml}
-                    onChange={(value) => {
-                      setError(false)
-                      setInput(value)
-                    }}
-                  />
-                </div>
-              </CardBody>
-            </Card>
-          </FlexItem>
-
-          <FlexItem flex={{ default: "flex_1" }}>
-            <Card isPlain>
-              <CardHeader className="pdl-run-split-item-card-header">
-                <CardTitle>Output</CardTitle>
-              </CardHeader>
-              <CardBody className="pdl-run-split-item-card-body">
-                <div
-                  className="pdl-run-terminal"
-                  ref={xtermRef}
-                  style={{ height: "600px" }}
-                />
-              </CardBody>
-            </Card>
-          </FlexItem>
-        </Flex>
-
+      <PageSection type="subnav">
         <Toolbar>
           <ToolbarContent>
             <ToolbarItem>
@@ -143,6 +97,49 @@ export default function Run() {
           </ToolbarContent>
         </Toolbar>
       </PageSection>
+
+      <PageSection
+        className="pdl-run-page-section"
+        padding={{ default: "noPadding" }}
+      >
+        <Card isCompact isPlain>
+          <CardHeader className="pdl-run-split-item-card-header">
+            <CardTitle>Program</CardTitle>
+          </CardHeader>
+          <CardBody className="pdl-run-split-item-card-body">
+            <div style={{ height: "300px" }}>
+              <CodeEditor
+                onEditorDidMount={(editor, _monaco) => {
+                  editor.layout()
+                }}
+                options={{ fontSize: 16 }}
+                aria-label="text area to provide PDL program source"
+                code={initialInput}
+                isDarkTheme
+                isFullHeight
+                language={Language.yaml}
+                onChange={(value) => {
+                  setError(false)
+                  setInput(value)
+                }}
+              />
+            </div>
+          </CardBody>
+        </Card>
+
+        <Card isCompact isPlain>
+          <CardHeader className="pdl-run-split-item-card-header">
+            <CardTitle>Output</CardTitle>
+          </CardHeader>
+          <CardBody className="pdl-run-split-item-card-body">
+            <div
+              className="pdl-run-terminal"
+              ref={xtermRef}
+              style={{ height: "400px" }}
+            />
+          </CardBody>
+        </Card>
+      </PageSection>
     </Page>
   )
 }