Keep editor full height when output is a short error

frontend/src/components/App/index.module.css

@@ -9,5 +9,6 @@
     .editorColumn {
         min-height: 500px;
         height: auto;
+        flex: none;
     }
 }

frontend/src/components/App/index.spec.tsx

@@ -1,15 +1,21 @@
 import { test, expect } from '@playwright/experimental-ct-react';
+import type { MountResult } from '@playwright/experimental-ct-react';
+import type { Page } from 'playwright/test';
 import App from '.';
 import CodeContextProvider from '../CodeContext';
 
-test('desktop layout fills the viewport in two aligned columns', async ({ mount, page }) => {
+async function mountApp(mount: (component: React.ReactElement) => Promise<MountResult>, page: Page) {
   await page.addStyleTag({ content: 'html, body, #root { height: 100%; margin: 0; }' });
   await page.setViewportSize({ width: 1440, height: 900 });
   await mount(
     <CodeContextProvider>
       <App />
     </CodeContextProvider>
   );
+}
+
+test('desktop layout fills the viewport in two aligned columns', async ({ mount, page }) => {
+  await mountApp(mount, page);
 
   const main = page.getByTestId('app-main');
   const editor = page.getByTestId('app-editor-column');
@@ -30,4 +36,29 @@ test('desktop layout fills the viewport in two aligned columns', async ({ mount,
   expect(Math.abs(editorBox!.width - examplesBox!.width)).toBeLessThan(24);
   expect(Math.abs(editorBox!.y - examplesBox!.y)).toBeLessThan(8);
   expect(editorBox!.x + editorBox!.width).toBeLessThanOrEqual(examplesBox!.x + 2);
+  expect(editorBox!.height).toBeGreaterThan(viewport.height * 0.7);
+  expect(Math.abs(editorBox!.height - examplesBox!.height)).toBeLessThan(8);
+});
+
+test('editor column stays full height after a short output error', async ({ mount, page }) => {
+  await page.route('**/service/control/run', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ error: 'Error: Could not complete bot check. Please try again.' }),
+    });
+  });
+  await mountApp(mount, page);
+
+  const viewport = page.viewportSize()!;
+  await page.getByRole('button', { name: 'Run' }).click();
+  await expect(page.getByText('Could not complete bot check')).toBeVisible();
+
+  const editorBox = await page.getByTestId('app-editor-column').boundingBox();
+  const outputBox = await page.getByTestId('app-examples-column').boundingBox();
+  expect(editorBox).toBeTruthy();
+  expect(outputBox).toBeTruthy();
+  expect(editorBox!.height).toBeGreaterThan(viewport.height * 0.7);
+  expect(outputBox!.height).toBeGreaterThan(viewport.height * 0.7);
+  expect(Math.abs(editorBox!.height - outputBox!.height)).toBeLessThan(8);
 });

frontend/src/components/App/index.tsx

@@ -83,14 +83,16 @@ const App: React.FunctionComponent = () => {
     <CustomProvider theme={darkMode ? 'dark' : 'light'}>
       <Container h="100%">
         <Header />
-        <Content minh={0} overflow="auto">
-          <Grid fluid data-testid="app-main" h={{ md: '100%' }} w="100%">
-            <Row h={{ md: '100%' }}>
-              <Col span={{ xs: 24, md: 12 }} h={{ md: '100%' }} minw={0} pos="relative" className={styles.editorColumn} data-testid="app-editor-column">
+        <Content minh={0} overflow="auto" display="flex" direction="column">
+          <Grid fluid data-testid="app-main" w="100%" flex={1} minh={0} display="flex" direction="column">
+            <Row flex={1} minh={0} w="100%">
+              <Col span={{ xs: 24, md: 12 }} minw={0} minh={0} pos="relative" display="flex" direction="column" className={styles.editorColumn} data-testid="app-editor-column">
                 {loading && <Loader center content="loading" backdrop style={{ zIndex: 10 }} />}
                 <Panel
                   bodyFill
-                  h="100%"
+                  flex={1}
+                  minh={0}
+                  w="100%"
                   display="flex"
                   direction="column"
                   overflow="hidden"
@@ -111,7 +113,7 @@ const App: React.FunctionComponent = () => {
                   <Editor onExecution={handleExecutionRef} />
                 </Panel>
               </Col>
-              <Col span={{ xs: 24, md: 12 }} h={{ md: '100%' }} minw={0} data-testid="app-examples-column">
+              <Col span={{ xs: 24, md: 12 }} minw={0} display="flex" direction="column" data-testid="app-examples-column">
                 <RightPanel resp={resp} />
               </Col>
             </Row>

frontend/src/components/RightPanel/index.tsx

@@ -24,7 +24,9 @@ const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp }) => {
     return (
         <Panel
             bodyFill
-            h="100%"
+            flex={1}
+            minh={0}
+            w="100%"
             display="flex"
             direction="column"
             overflow="hidden"