fix: align Today desktop menu toggle

frontend/e2e/today-plain-list.spec.ts

@@ -1,7 +1,7 @@
 import type { APIRequestContext } from '@playwright/test'
 import { expect, test } from './fixtures'
 
-const widths = [1600, 1440, 721, 720, 390, 375]
+const widths = [1600, 1440, 1050, 1000, 931, 721, 720, 390, 375]
 
 async function csrf(request: APIRequestContext) {
   const state = await request.storageState()
@@ -48,6 +48,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
   await expect(habitRowLocator).toHaveCount(1)
   for (const width of widths) {
     await page.setViewportSize({ width, height: width <= 390 ? 844 : 900 })
+    await page.waitForTimeout(300)
     await expect.poll(async () => page.evaluate(() => {
       const content = document.querySelector<HTMLElement>('.today-context')?.getBoundingClientRect()
       const environment = document.querySelector<HTMLElement>('.today-environment')?.getBoundingClientRect()
@@ -59,7 +60,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
       }
     })).toEqual({
       media720: width <= 720,
-      contentWidth: width >= 1440 ? 1080 : width === 721 ? 630 : width - 58,
+      contentWidth: width >= 1440 ? 1080 : width > 930 ? Math.min(1080, width - 324) : width === 721 ? 630 : width - 58,
       environmentHeight: width >= 721 ? 55 : width === 375 ? 79 : 81,
     })
     await expect(page.locator('.today-heading')).toHaveCount(1)
@@ -83,6 +84,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
       const firstSection = document.querySelector<HTMLElement>('.today-section-toggle')!
       const heading = document.querySelector<HTMLElement>('.today-heading')!
       const main = document.querySelector<HTMLElement>('main.today-main')!
+      const menuButton = main.querySelector<HTMLElement>('.topbar > .icon')!
       const content = rect('.today-context')
       const sectionTitle = firstSection.querySelector<HTMLElement>('.today-section-title')!
       const sectionSummary = firstSection.querySelector<HTMLElement>('.today-section-summary')!
@@ -131,6 +133,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
         mainOverflow: main.scrollWidth - main.clientWidth,
         main: { ...main.getBoundingClientRect().toJSON(), clientWidth: main.clientWidth, paddingLeft: getComputedStyle(main).paddingLeft, paddingRight: getComputedStyle(main).paddingRight },
         content: { left: content.left, right: content.right, width: content.width },
+        menuButton: { left: menuButton.getBoundingClientRect().left, width: menuButton.getBoundingClientRect().width },
         environment: { ...environment.getBoundingClientRect().toJSON(), scrollWidth: environment.scrollWidth, clientWidth: environment.clientWidth },
         directions: { calendar: getComputedStyle(calendar).flexDirection, weather: getComputedStyle(weather).flexDirection, gold: getComputedStyle(gold).flexDirection },
         itemWidths: [calendar, weather, gold].map((element) => element.getBoundingClientRect().width),
@@ -149,6 +152,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
         summaries,
         styles: {
           mainPaddingLeft: getComputedStyle(main).paddingLeft,
+          menuLeft: getComputedStyle(menuButton).left,
           contextHeight: content.height,
           headingDisplay: getComputedStyle(heading).display,
           headingAlignItems: getComputedStyle(heading).alignItems,
@@ -181,6 +185,23 @@ test('Today plain-list layout matches the approved responsive geometry', async (
     console.log(`[today-geometry][${width}] ${JSON.stringify(metrics)}`)
     expect(metrics.documentOverflow).toBe(0)
     expect(metrics.mainOverflow).toBeLessThanOrEqual(0)
+    if (width > 930) {
+      const expectedMenuOffset = width <= 1050 ? 24 : 34
+      expect(metrics.menuButton.left - metrics.main.left).toBeCloseTo(expectedMenuOffset, 0)
+      await page.getByRole('button', { name: '收起菜单' }).click()
+      await expect(page.locator('.shell')).toHaveClass(/sidebar-collapsed/)
+      await page.waitForTimeout(300)
+      const collapsedMenu = await page.evaluate(() => {
+        const main = document.querySelector<HTMLElement>('main.today-main')!.getBoundingClientRect()
+        const button = document.querySelector<HTMLElement>('main.today-main > .topbar > .icon')!.getBoundingClientRect()
+        return { offset: button.left - main.left, width: button.width }
+      })
+      expect(collapsedMenu.offset).toBeCloseTo(expectedMenuOffset, 0)
+      expect(collapsedMenu.width).toBe(44)
+      await page.getByRole('button', { name: '展开菜单' }).click()
+      await expect(page.locator('.shell')).not.toHaveClass(/sidebar-collapsed/)
+      await page.waitForTimeout(300)
+    }
     expect(metrics.environment.scrollWidth).toBeLessThanOrEqual(metrics.environment.clientWidth)
     expect(metrics.collisions).toBeFalsy()
     expect(metrics.positiveGeometry).toBeTruthy()
@@ -231,7 +252,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
     expect(metrics.styles.fabIconWidth).toBeCloseTo(30, 0)
     if (width >= 721) {
       expect(metrics.uniqueRows).toHaveLength(1)
-      expect(metrics.content.width).toBeCloseTo(width >= 1440 ? 1080 : 630, 0)
+      expect(metrics.content.width).toBeCloseTo(width >= 1440 ? 1080 : width > 930 ? Math.min(1080, width - 324) : 630, 0)
       expect(Math.max(...metrics.itemWidths) - Math.min(...metrics.itemWidths)).toBeLessThanOrEqual(1)
       expect(Math.max(...metrics.itemHeights) - Math.min(...metrics.itemHeights)).toBeLessThanOrEqual(1)
       expect(metrics.environment.height).toBeLessThanOrEqual(72)
@@ -257,7 +278,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
       }
     }
     if (width >= 721) {
-      expect(metrics.content.width).toBeLessThanOrEqual(width >= 1440 ? 1080 : 721)
+      expect(metrics.content.width).toBeLessThanOrEqual(width >= 1440 ? 1080 : width > 930 ? width - 324 : 721)
       expect(Math.abs(metrics.content.left - (metrics.main.left + (metrics.main.width - metrics.content.width) / 2))).toBeLessThanOrEqual(2)
     }
   }