fix: refine Today mobile hierarchy

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

@@ -51,8 +51,10 @@ test('Today plain-list layout matches the approved responsive geometry', async (
     })).toEqual({
       media720: width <= 720,
       contentWidth: width >= 1440 ? 1080 : width === 721 ? 630 : width - 58,
-      environmentHeight: width >= 721 ? 55 : width === 375 ? 90 : 93,
+      environmentHeight: width >= 721 ? 55 : width === 375 ? 79 : 81,
     })
+    await expect(page.locator('.today-heading')).toHaveCount(1)
+    await expect(page.locator('.today-inline-add')).toHaveCount(1)
     await expect(taskRowLocator).toHaveCount(1)
     await expect(habitRowLocator).toHaveCount(1)
     await expect(page.locator('.today-environment')).toBeVisible()
@@ -69,6 +71,8 @@ test('Today plain-list layout matches the approved responsive geometry', async (
       const remaining = document.querySelector<HTMLElement>('.today-remaining')!
       const filter = document.querySelector<HTMLElement>('.today-inline-filter')!
       const firstSection = document.querySelector<HTMLElement>('.today-section-toggle')!
+      const heading = document.querySelector<HTMLElement>('.today-heading')!
+      const inlineAdd = document.querySelector<HTMLElement>('.today-inline-add')!
       const main = document.querySelector<HTMLElement>('main.today-main')!
       const content = rect('.today-context')
       const sectionTitle = firstSection.querySelector<HTMLElement>('.today-section-title')!
@@ -84,8 +88,8 @@ test('Today plain-list layout matches the approved responsive geometry', async (
       }))
       const taskRow = document.querySelector<HTMLElement>(`#today-tasks .task-row[data-task-id="${taskId}"]`)!
       const habitRow = document.querySelector<HTMLElement>(`.today-habit-row[data-habit-id="${habitId}"]`)!
-      const fab = document.querySelector<HTMLElement>('.unified-fab')!
-      const orderedElements = [environment, title, remaining, filter, firstSection]
+      const fab = document.querySelector<HTMLElement>('.unified-fab')
+      const orderedElements = [environment, heading, firstSection]
       const ordered = orderedElements.map((element) => {
         const box = element.getBoundingClientRect()
         return { left: box.left, right: box.right, top: box.top, bottom: box.bottom, width: box.width, height: box.height }
@@ -136,6 +140,15 @@ test('Today plain-list layout matches the approved responsive geometry', async (
         summaries,
         styles: {
           mainPaddingLeft: getComputedStyle(main).paddingLeft,
+          contextHeight: content.height,
+          headingDisplay: getComputedStyle(heading).display,
+          headingAlignItems: getComputedStyle(heading).alignItems,
+          filterTop: filter.getBoundingClientRect().top,
+          filterRight: filter.getBoundingClientRect().right,
+          inlineAddPosition: getComputedStyle(inlineAdd).position,
+          inlineAddWidth: inlineAdd.getBoundingClientRect().width,
+          inlineAddBottom: inlineAdd.getBoundingClientRect().bottom,
+          viewportHeight: innerHeight,
           titleFontSize: getComputedStyle(title).fontSize,
           titleFontWeight: getComputedStyle(title).fontWeight,
           filterWidth: filter.getBoundingClientRect().width,
@@ -154,8 +167,8 @@ test('Today plain-list layout matches the approved responsive geometry', async (
           habitHeight: habitRow.getBoundingClientRect().height,
           habitBackground: getComputedStyle(habitRow).backgroundColor,
           habitBorderBottom: getComputedStyle(habitRow).borderBottomWidth,
-          fabShadow: getComputedStyle(fab).boxShadow,
-          fabIconWidth: fab.querySelector('svg')?.getBoundingClientRect().width,
+          fabShadow: fab ? getComputedStyle(fab).boxShadow : '',
+          fabIconWidth: fab?.querySelector('svg')?.getBoundingClientRect().width ?? 0,
         },
       }
     }, { taskId, habitId })
@@ -188,8 +201,18 @@ test('Today plain-list layout matches the approved responsive geometry', async (
     expect(metrics.styles.filterVisualHeight).toBeLessThanOrEqual(36)
     expect(metrics.styles.filterBackground).toBe('rgba(0, 0, 0, 0)')
     expect(metrics.styles.filterBorderRadius).toBe('0px')
-    expect(metrics.styles.fabShadow).toContain('8px 18px')
-    expect(metrics.styles.fabIconWidth).toBeCloseTo(30, 0)
+    expect(metrics.styles.headingDisplay).toBe('grid')
+    expect(metrics.styles.headingAlignItems).toBe('center')
+    expect(metrics.styles.filterTop).toBeGreaterThanOrEqual(metrics.ordered[1].top)
+    expect(metrics.styles.filterTop).toBeLessThanOrEqual(metrics.ordered[1].bottom - metrics.styles.filterHeight)
+    expect(metrics.styles.filterRight).toBeCloseTo(metrics.content.right, 0)
+    expect(metrics.styles.inlineAddPosition).toBe('relative')
+    expect(metrics.styles.inlineAddWidth).toBeCloseTo(metrics.content.width, 0)
+    expect(metrics.styles.inlineAddBottom).toBeGreaterThanOrEqual(metrics.ordered[metrics.ordered.length - 1].bottom)
+    expect(metrics.styles.inlineAddBottom).toBeLessThanOrEqual(metrics.styles.viewportHeight + 1)
+    if (width <= 720) expect(metrics.styles.contextHeight).toBeLessThanOrEqual(210)
+    expect(metrics.styles.fabShadow).toBe('')
+    expect(metrics.styles.fabIconWidth).toBe(0)
     if (width >= 721) {
       expect(metrics.uniqueRows).toHaveLength(1)
       expect(metrics.content.width).toBeCloseTo(width >= 1440 ? 1080 : 630, 0)
@@ -214,7 +237,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
         expect(metrics.content.left).toBeCloseTo(29, 0)
         expect(metrics.styles.mainPaddingLeft).toBe('29px')
         expect(metrics.styles.titleFontSize).toBe('24px')
-        expect(metrics.environment.height).toBeCloseTo(width === 375 ? 90 : 93, 0)
+        expect(metrics.environment.height).toBeCloseTo(width === 375 ? 79 : 81, 0)
       }
     }
     if (width >= 721) {