diff --git a/e2e/playwright/flow-tests.spec.ts b/e2e/playwright/flow-tests.spec.ts
index eaf80edc7..43fadf466 100644
--- a/e2e/playwright/flow-tests.spec.ts
+++ b/e2e/playwright/flow-tests.spec.ts
@@ -1630,3 +1630,44 @@ test('Sketch on face', async ({ page }) => {
 |> close(%)
 |> extrude(5 + 7, %)`)
 })
+
+test('Can code mod a line length', async ({ page }) => {
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> xLine(-20, %)
+`
+    )
+  })
+
+  const u = getUtils(page)
+  const PUR = 400 / 37.5 //pixeltoUnitRatio
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // Click the line of code for xLine.
+  await page.getByText(`xLine(-20, %)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
+  await page.waitForTimeout(100)
+
+  // enter sketch again
+  await page.getByRole('button', { name: 'Edit Sketch' }).click()
+  await page.waitForTimeout(300) // wait for animation
+
+  const startXPx = 500
+  await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
+  await page.mouse.click(615, 133)
+  await page.getByRole('button', { name: 'length', exact: true }).click()
+  await page.getByText('Add constraining value').click()
+
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const length001 = 20const part001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> line([0, 20], %)  |> xLine(-length001, %)`
+  )
+})
diff --git a/src/App.tsx b/src/App.tsx
index 5fe644e2e..a84ad5305 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import { isTauri } from 'lib/isTauri'
 import { useLspContext } from 'components/LspProvider'
 import { useRefreshSettings } from 'hooks/useRefreshSettings'
 import { ModelingSidebar } from 'components/ModelingSidebar/ModelingSidebar'
+import ModalContainer from 'react-modal-promise'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -122,6 +123,7 @@ export function App() {
         project={{ project, file }}
         enableMenu={true}
       />
+      <ModalContainer />
       <ModelingSidebar paneOpacity={paneOpacity} />
       <Stream className="absolute inset-0 z-0" />
       {/* <CamToggle /> */}