fix aux down margin

Author: eagleoflqj

page/common.scss

@@ -404,7 +404,7 @@ $color-transition: var(--color-transition, background-color 500ms ease, color 50
       border-radius: $highlight-radius;
     }
 
-    .fcitx-candidate-inner, .fcitx-preedit, .fcitx-aux-up, .fcitx-aux-down, .fcitx-menu-item, .fcitx-prev, .fcitx-next {
+    .fcitx-candidate-inner, .fcitx-preedit, .fcitx-aux-up, .fcitx-menu-item, .fcitx-prev, .fcitx-next {
       margin: $margin;
     }
 
@@ -478,12 +478,18 @@ $color-transition: var(--color-transition, background-color 500ms ease, color 50
       }
     }
 
-    .fcitx-candidate-inner, .fcitx-preedit, .fcitx-aux-up, .fcitx-aux-down, .fcitx-menu-item {
+    .fcitx-candidate-inner, .fcitx-preedit, .fcitx-aux-up, .fcitx-menu-item {
       /* combine min-block-size, min-inline-size and padding to make aux-up a square for 小 and A */
       padding-block: $top-padding $bottom-padding;
       padding-inline: $left-padding $right-padding;
     }
 
+    .fcitx-aux-down {
+      /* No highlight for aux-down so combine padding and margin. */
+      padding-block: calc($top-padding + $margin) calc($bottom-padding + $margin);
+      padding-inline: calc($left-padding + $margin) calc($right-padding + $margin);
+    }
+
     /* Use a dedicated div because
     * 1. divider color is not overlaid by panel color
     * 2. divider may not be full-length

tests/test-header.spec.ts

@@ -30,3 +30,12 @@ test('No text shift when preedit grows', async ({ page }) => {
   const ceBox = await getTextBox(preedit, 0)
   expect(ceBox).toEqual(cBox)
 })
+
+test('Aux down', async ({ page }) => {
+  await init(page)
+  await updateInputPanel(page, '', 'Clipboard', 'No entries.')
+  const auxDown = panel(page).locator('.fcitx-aux-down')
+  await expect(auxDown).toHaveCSS('padding', '2px 9px')
+  await expect(auxDown).toHaveCSS('margin', '0px')
+  expect((await getBox(auxDown)).height).toEqual(28)
+})