fix: compact desktop task composer

frontend/e2e/mobile-ui.spec.ts

@@ -25,6 +25,57 @@ async function openTaskComposer(page: Page) {
   return page.getByRole('dialog', { name: /添加(?:今天)?任务/ })
 }
 
+test('desktop task composer stays compact, centered, and scrollable on short screens', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+  await page.goto('/')
+  let dialog = await openTaskComposer(page)
+  await expect(dialog).toBeVisible()
+
+  const measure = () => dialog.evaluate(element => {
+    const panel = element as HTMLElement
+    const rect = panel.getBoundingClientRect()
+    const body = panel.querySelector<HTMLElement>('.app-sheet__body')!
+    const header = panel.querySelector<HTMLElement>('.app-sheet__header')!.getBoundingClientRect()
+    const footer = panel.querySelector<HTMLElement>('.app-sheet__footer')!.getBoundingClientRect()
+    return {
+      viewport: { width: innerWidth, height: innerHeight },
+      panel: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height },
+      body: { clientHeight: body.clientHeight, scrollHeight: body.scrollHeight, overflowY: getComputedStyle(body).overflowY },
+      headerTop: header.top,
+      footerBottom: footer.bottom,
+    }
+  })
+
+  let metrics = await measure()
+  expect(metrics.panel.width).toBeCloseTo(560, 0)
+  expect(metrics.panel.left).toBeCloseTo((metrics.viewport.width - metrics.panel.width) / 2, 0)
+  expect(metrics.panel.top).toBeCloseTo((metrics.viewport.height - metrics.panel.height) / 2, 0)
+  expect(metrics.panel.height).toBeLessThanOrEqual(521)
+
+  await page.setViewportSize({ width: 1280, height: 633 })
+  metrics = await measure()
+  expect(metrics.panel.width).toBeCloseTo(560, 0)
+  expect(metrics.panel.left).toBeCloseTo((metrics.viewport.width - metrics.panel.width) / 2, 0)
+  expect(metrics.panel.top).toBeCloseTo((metrics.viewport.height - metrics.panel.height) / 2, 0)
+  expect(metrics.panel.height).toBeLessThanOrEqual(metrics.viewport.height * 0.82 + 1)
+  expect(metrics.body.overflowY).toBe('auto')
+  expect(metrics.body.scrollHeight).toBeGreaterThan(metrics.body.clientHeight)
+  expect(metrics.headerTop).toBeGreaterThanOrEqual(0)
+  expect(metrics.footerBottom).toBeLessThanOrEqual(metrics.viewport.height + 1)
+
+  await page.keyboard.press('Escape')
+  await page.setViewportSize({ width: 930, height: 844 })
+  dialog = await openTaskComposer(page)
+  const mobile = await dialog.evaluate(element => {
+    const rect = element.getBoundingClientRect()
+    return { left: rect.left, right: rect.right, bottom: rect.bottom, width: rect.width, viewportWidth: innerWidth, viewportHeight: innerHeight }
+  })
+  expect(mobile.left).toBeCloseTo(0, 0)
+  expect(mobile.right).toBeCloseTo(mobile.viewportWidth, 0)
+  expect(mobile.width).toBeCloseTo(mobile.viewportWidth, 0)
+  expect(mobile.bottom).toBeCloseTo(mobile.viewportHeight, 0)
+})
+
 test('bottom navigation uses the paper baseline geometry', async ({ page }) => {
   await page.goto('/')
   const metrics = await page.locator('.bottom').evaluate(element => {