From 931f5bb57abd5e8f4ec41e6ea40a3df35a99266a Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 4 Sep 2026 05:30:41 +0000 Subject: [PATCH 1/4] Keep editor full height when the output panel is short Percentage height on the Grid/Row/Cols does not resolve against Content's flex-induced auto height, so a short error output collapsed the playground to ~200px. Fill the shell with flex instead and assert the columns stay viewport-tall after a bot-check error. Co-authored-by: Max Schmitt --- frontend/src/components/App/index.module.css | 42 +++++++++++++++++++ frontend/src/components/App/index.spec.tsx | 33 ++++++++++++++- frontend/src/components/App/index.tsx | 12 +++--- .../components/RightPanel/index.module.css | 5 +++ frontend/src/components/RightPanel/index.tsx | 3 +- 5 files changed, 87 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/RightPanel/index.module.css diff --git a/frontend/src/components/App/index.module.css b/frontend/src/components/App/index.module.css index 1c3142b..79cefa4 100644 --- a/frontend/src/components/App/index.module.css +++ b/frontend/src/components/App/index.module.css @@ -5,6 +5,48 @@ margin: 0; } +.content { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; +} + +.grid { + flex: 1 1 auto; + min-height: 0; + width: 100%; + display: flex; + flex-direction: column; +} + +.row { + flex: 1 1 auto; + min-height: 0; + width: 100%; + align-items: stretch; +} + +.editorColumn, +.examplesColumn { + display: flex; + flex-direction: column; + min-height: 0; +} + +.fillPanel { + flex: 1 1 auto; + min-height: 0; + width: 100%; +} + +@media (min-width: 768px) { + .editorColumn, + .examplesColumn { + height: 100%; + } +} + @media (max-width: 767px) { .editorColumn { min-height: 500px; diff --git a/frontend/src/components/App/index.spec.tsx b/frontend/src/components/App/index.spec.tsx index 3b489a6..cedac81 100644 --- a/frontend/src/components/App/index.spec.tsx +++ b/frontend/src/components/App/index.spec.tsx @@ -1,8 +1,10 @@ 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, page: Page) { await page.addStyleTag({ content: 'html, body, #root { height: 100%; margin: 0; }' }); await page.setViewportSize({ width: 1440, height: 900 }); await mount( @@ -10,6 +12,10 @@ test('desktop layout fills the viewport in two aligned columns', async ({ mount, ); +} + +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); }); diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx index 9be9bbf..445963b 100644 --- a/frontend/src/components/App/index.tsx +++ b/frontend/src/components/App/index.tsx @@ -83,17 +83,17 @@ const App: React.FunctionComponent = () => {
- - - - + + + + {loading && } @@ -111,7 +111,7 @@ const App: React.FunctionComponent = () => { - + diff --git a/frontend/src/components/RightPanel/index.module.css b/frontend/src/components/RightPanel/index.module.css new file mode 100644 index 0000000..369f5f6 --- /dev/null +++ b/frontend/src/components/RightPanel/index.module.css @@ -0,0 +1,5 @@ +.fillPanel { + flex: 1 1 auto; + min-height: 0; + width: 100%; +} diff --git a/frontend/src/components/RightPanel/index.tsx b/frontend/src/components/RightPanel/index.tsx index 8302891..ee0e6e6 100644 --- a/frontend/src/components/RightPanel/index.tsx +++ b/frontend/src/components/RightPanel/index.tsx @@ -8,6 +8,7 @@ import RightExamplesPanel from './RightExamplesPanel' import { CodeContext } from '../CodeContext' import type { ExecutionResponse } from '../../utils' +import styles from './index.module.css' interface RightPanelProps { resp: ExecutionResponse | null; @@ -24,7 +25,7 @@ const RightPanel: React.FunctionComponent = ({ resp }) => { return ( Date: Fri, 4 Sep 2026 05:33:18 +0000 Subject: [PATCH 2/4] Use rsuite flex props instead of custom layout CSS Keep the Content/Grid/Row fill chain on Box props so a short error does not collapse the editor. Leave only the html/body/#app height reset, and use minh={{ xs: 500, md: 0 }} for the mobile editor. Co-authored-by: Max Schmitt --- frontend/src/components/App/index.module.css | 49 ------------------- frontend/src/components/App/index.tsx | 16 +++--- .../components/RightPanel/index.module.css | 5 -- frontend/src/components/RightPanel/index.tsx | 5 +- 4 files changed, 12 insertions(+), 63 deletions(-) delete mode 100644 frontend/src/components/RightPanel/index.module.css diff --git a/frontend/src/components/App/index.module.css b/frontend/src/components/App/index.module.css index 79cefa4..ab24f8e 100644 --- a/frontend/src/components/App/index.module.css +++ b/frontend/src/components/App/index.module.css @@ -4,52 +4,3 @@ height: 100%; margin: 0; } - -.content { - flex: 1 1 auto; - min-height: 0; - display: flex; - flex-direction: column; -} - -.grid { - flex: 1 1 auto; - min-height: 0; - width: 100%; - display: flex; - flex-direction: column; -} - -.row { - flex: 1 1 auto; - min-height: 0; - width: 100%; - align-items: stretch; -} - -.editorColumn, -.examplesColumn { - display: flex; - flex-direction: column; - min-height: 0; -} - -.fillPanel { - flex: 1 1 auto; - min-height: 0; - width: 100%; -} - -@media (min-width: 768px) { - .editorColumn, - .examplesColumn { - height: 100%; - } -} - -@media (max-width: 767px) { - .editorColumn { - min-height: 500px; - height: auto; - } -} diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx index 445963b..d0c4b18 100644 --- a/frontend/src/components/App/index.tsx +++ b/frontend/src/components/App/index.tsx @@ -12,7 +12,7 @@ import { CodeContext } from '../CodeContext' import CodeLanguageSelector from '../CodeLanguageSelector'; import useDarkMode from '../../hooks/useDarkMode'; -import styles from './index.module.css' +import './index.module.css' const VITE_TURNSTILE_SITEKEY = '0x4AAAAAAA_K0T_2LZ0rgUtv'; @@ -83,17 +83,19 @@ const App: React.FunctionComponent = () => {
- - - - + + + + {loading && } @@ -111,7 +113,7 @@ const App: React.FunctionComponent = () => { - + diff --git a/frontend/src/components/RightPanel/index.module.css b/frontend/src/components/RightPanel/index.module.css deleted file mode 100644 index 369f5f6..0000000 --- a/frontend/src/components/RightPanel/index.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.fillPanel { - flex: 1 1 auto; - min-height: 0; - width: 100%; -} diff --git a/frontend/src/components/RightPanel/index.tsx b/frontend/src/components/RightPanel/index.tsx index ee0e6e6..b3a7997 100644 --- a/frontend/src/components/RightPanel/index.tsx +++ b/frontend/src/components/RightPanel/index.tsx @@ -8,7 +8,6 @@ import RightExamplesPanel from './RightExamplesPanel' import { CodeContext } from '../CodeContext' import type { ExecutionResponse } from '../../utils' -import styles from './index.module.css' interface RightPanelProps { resp: ExecutionResponse | null; @@ -25,7 +24,9 @@ const RightPanel: React.FunctionComponent = ({ resp }) => { return ( Date: Fri, 4 Sep 2026 05:34:25 +0000 Subject: [PATCH 3/4] Drop responsive Box flex; keep only a mobile editor min-height rsuite media-query style updates did not apply flex/minh at md, so the editor stayed at the 500px xs floor. Use flex={1} on the fill chain and a single max-width 767px rule for stacked columns. Co-authored-by: Max Schmitt --- frontend/src/components/App/index.module.css | 8 ++++++++ frontend/src/components/App/index.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/App/index.module.css b/frontend/src/components/App/index.module.css index ab24f8e..82173ba 100644 --- a/frontend/src/components/App/index.module.css +++ b/frontend/src/components/App/index.module.css @@ -4,3 +4,11 @@ height: 100%; margin: 0; } + +@media (max-width: 767px) { + .editorColumn { + min-height: 500px; + height: auto; + flex: none; + } +} diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx index d0c4b18..d16559d 100644 --- a/frontend/src/components/App/index.tsx +++ b/frontend/src/components/App/index.tsx @@ -12,7 +12,7 @@ import { CodeContext } from '../CodeContext' import CodeLanguageSelector from '../CodeLanguageSelector'; import useDarkMode from '../../hooks/useDarkMode'; -import './index.module.css' +import styles from './index.module.css' const VITE_TURNSTILE_SITEKEY = '0x4AAAAAAA_K0T_2LZ0rgUtv'; @@ -84,9 +84,9 @@ const App: React.FunctionComponent = () => {
- - - + + + {loading && } Date: Fri, 4 Sep 2026 05:53:42 +0000 Subject: [PATCH 4/4] Fix frontend image build by dropping @playwright/test types Production tsc type-checks component specs, and @playwright/test is not a frontend dependency. Import Page from playwright/test instead. Co-authored-by: Max Schmitt --- frontend/src/components/App/index.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/App/index.spec.tsx b/frontend/src/components/App/index.spec.tsx index cedac81..b2e4332 100644 --- a/frontend/src/components/App/index.spec.tsx +++ b/frontend/src/components/App/index.spec.tsx @@ -1,6 +1,6 @@ import { test, expect } from '@playwright/experimental-ct-react'; import type { MountResult } from '@playwright/experimental-ct-react'; -import type { Page } from '@playwright/test'; +import type { Page } from 'playwright/test'; import App from '.'; import CodeContextProvider from '../CodeContext';