From c2bcab4386b991ba07f79e38d7c66b4bb30e69c9 Mon Sep 17 00:00:00 2001
From: Qijia Liu <liumeo@pku.edu.cn>
Date: Sun, 21 Jul 2024 00:58:58 -0400
Subject: [PATCH] apply min-width for vertical mode

---
 page/customize.ts          | 5 +++++
 page/macos.scss            | 4 ++++
 tests/test-generic.spec.ts | 4 ++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/page/customize.ts b/page/customize.ts
index 570b7f0..188ea03 100644
--- a/page/customize.ts
+++ b/page/customize.ts
@@ -73,6 +73,7 @@ type STYLE_JSON = {
     BottomPadding: string
     LeftPadding: string
     LabelTextGap: string
+    VerticalMinWidth: string
     HorizontalDividerWidth: string
   }
   Advanced: {
@@ -85,6 +86,7 @@ function lightToDark (light: string) {
 }
 
 const PANEL = '.fcitx-basic .fcitx-panel'
+const PANEL_VERTICAL_CANDIDATE = `${PANEL}.fcitx-horizontal-tb .fcitx-vertical .fcitx-candidate`
 const PANEL_HORIZONTAL_DIVIDER = `${PANEL} .fcitx-hoverables.fcitx-vertical .fcitx-divider`
 const PANEL_HORIZONTAL_DIVIDER_SIDE = `${PANEL} .fcitx-hoverables.fcitx-vertical .fcitx-divider-side`
 // left of prev paging button, same with MSPY
@@ -465,6 +467,9 @@ export function setStyle (style: string) {
   rules[CANDIDATE_INNER]['padding-block-end'] = px(j.Size.BottomPadding)
   rules[CANDIDATE_INNER]['padding-inline-start'] = px(j.Size.LeftPadding)
   rules[CANDIDATE_INNER].gap = px(j.Size.LabelTextGap)
+  rules[PANEL_VERTICAL_CANDIDATE] = {
+    'min-inline-size': px(j.Size.VerticalMinWidth)
+  }
   rules[PANEL_HORIZONTAL_DIVIDER] = {
     'block-size': px(j.Size.HorizontalDividerWidth)
   }
diff --git a/page/macos.scss b/page/macos.scss
index 0938a80..b173334 100644
--- a/page/macos.scss
+++ b/page/macos.scss
@@ -143,6 +143,10 @@ $dark-graphite: rgb(105 105 105);
     font-size: 12px;
   }
 
+  .fcitx-horizontal-tb .fcitx-vertical .fcitx-candidate {
+    min-inline-size: 200px; /* avoid abrupt enlarging when start typing. */
+  }
+
   .fcitx-horizontal-tb .fcitx-horizontal .fcitx-paging.fcitx-arrow svg {
     transform: rotate(90deg);
   }
diff --git a/tests/test-generic.spec.ts b/tests/test-generic.spec.ts
index 4548438..014bfe9 100644
--- a/tests/test-generic.spec.ts
+++ b/tests/test-generic.spec.ts
@@ -151,8 +151,8 @@ test('Set layout', async ({ page }) => {
   expect(verticalBox).toMatchObject({
     x: 25, y: 39 // shadow and inline-grid
   })
-  expect(verticalBox.width).toBeGreaterThan(41)
-  expect(verticalBox.width).toBeLessThan(51)
+  expect(verticalBox.width).toBeGreaterThan(197)
+  expect(verticalBox.width).toBeLessThan(207)
   expect(verticalBox.height).toBeGreaterThan(120)
   expect(verticalBox.height).toBeLessThan(130)