style: refine archived habits section

frontend/e2e/habit-detail-paper-flow.spec.ts

@@ -108,7 +108,19 @@ test('habit detail paper flow is responsive, ordered, scrollable, and preserves
   await dialog.getByRole('button', { name: '关闭习惯详情' }).click()
 
   const archiveToggle = page.locator('.habit-archive-toggle')
+  const activeList = page.locator('.habit-list.plain-list').last()
+  const [activeListBox, archiveToggleBox] = await Promise.all([activeList.boundingBox(), archiveToggle.boundingBox()])
+  expect(activeListBox).not.toBeNull()
+  expect(archiveToggleBox).not.toBeNull()
+  expect(archiveToggleBox!.y - (activeListBox!.y + activeListBox!.height)).toBeGreaterThanOrEqual(24)
+  await expect(archiveToggle).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(archiveToggle).toHaveCSS('border-top-width', '0px')
   await archiveToggle.click()
+  const archivedPanel = page.locator('#archived-habits-panel')
+  const [toggleOpenBox, archivePanelBox] = await Promise.all([archiveToggle.boundingBox(), archivedPanel.boundingBox()])
+  expect(toggleOpenBox).not.toBeNull()
+  expect(archivePanelBox).not.toBeNull()
+  expect(archivePanelBox!.y - (toggleOpenBox!.y + toggleOpenBox!.height)).toBeGreaterThanOrEqual(10)
   const archivedOpener = page.getByRole('button', { name: new RegExp(archivedName) })
   await archivedOpener.click()
   dialog = page.getByRole('dialog', { name: archivedName })