Prevent code editor from sizing to content (#12479)

Prevent code editor from sizing to content and stealing width from doc editor; add a test that catches the bug.

Fixes #12476.

Author: kazcw

app/gui/integration-test/project-view/rightPanel.spec.ts

@@ -73,6 +73,33 @@ test('Doc panel focus (regression #10471)', async ({ page }) => {
   await expect(locate.rightDock(page)).toContainText('The main TEST method')
 })
 
+test('Code editor with wide content does not take space from doc editor (#12476)', async ({
+  page,
+}) => {
+  await actions.goToGraph(page)
+
+  await page.keyboard.press(`${CONTROL_KEY}+D`)
+  await expect(locate.rightDock(page)).toBeVisible()
+  await locate
+    .rightDock(page)
+    .elementHandle()
+    .then((el) => el!.waitForElementState('stable'))
+  const docPosWithoutCodeEditor = (await locate.rightDock(page).boundingBox())!.x
+
+  await page.keyboard.press(`${CONTROL_KEY}+\``)
+  const codeEditor = page.locator('.CodeEditor')
+  await expect(codeEditor).toBeVisible()
+  await locate
+    .rightDock(page)
+    .elementHandle()
+    .then((el) => el!.waitForElementState('stable'))
+  const docPosWithCodeEditor = (await locate.rightDock(page).boundingBox())!.x
+
+  // Note that we compare `x` instead of `width`: This will catch either a change in width, or the
+  // viewport becoming larger than the page (causing a change in *apparent* width).
+  expect(docPosWithCodeEditor).toBe(docPosWithoutCodeEditor)
+})
+
 test('Component help', async ({ page }) => {
   await actions.goToGraph(page, false)
   await locate.rightDock(page).getByRole('button', { name: 'Help' }).click()

app/gui/src/project-view/ProjectView.vue

@@ -72,6 +72,7 @@ onDeactivated(() => (visible.value = false))
 
 <style scoped>
 .ProjectView {
+  width: 100%;
   flex: 1;
   color: var(--color-text);
   font-family: var(--font-sans);

app/gui/src/project-view/components/GraphEditor.vue

@@ -700,7 +700,7 @@ const groupColors = computed(() => {
   }
   & .vertical {
     flex: auto;
-    min-width: 0;
+    overflow-x: hidden;
   }
 }
 

app/gui/src/project-view/mock/engine.ts

@@ -90,6 +90,8 @@ main =
     aggregated = data.aggregate
     autoscoped = data.aggregate [..Group_By]
     selected = data.select_columns
+
+# To test for regressions in #12476, this line is really long and we test that the code editor doesn't resize to fit it. This line is really really long. This line is really REALLY long.
 `
 
 const fileTree = {