From bbe6662918fb3d5611fd9c4d9a90dc05ecf8f48a Mon Sep 17 00:00:00 2001
From: Qijia Liu <liumeo@pku.edu.cn>
Date: Sun, 29 Sep 2024 20:56:47 -0400
Subject: [PATCH] fix too long candidate/comment style for scroll mode

---
 page/generic.scss | 4 ++++
 page/scroll.ts    | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/page/generic.scss b/page/generic.scss
index 76d32d9..43c7be0 100644
--- a/page/generic.scss
+++ b/page/generic.scss
@@ -110,6 +110,10 @@
       opacity: 1;
     }
 
+    .fcitx-comment {
+      overflow-wrap: anywhere; /* Disallow long comment to introduce horizontal scrollbar. */
+    }
+
     .fcitx-divider {
       flex-grow: 1;
     }
diff --git a/page/scroll.ts b/page/scroll.ts
index 029938b..841554f 100644
--- a/page/scroll.ts
+++ b/page/scroll.ts
@@ -126,6 +126,12 @@ export function recalculateScroll(scrollStart: boolean) {
       rowItemCount.push(itemCount)
       itemCount = 1
       currentY = y
+      const previousDivider = candidate.previousElementSibling!
+      if (previousDivider.getBoundingClientRect().y === y) {
+        // The element in previous row is too long so the divider goes to the next row.
+        // The fix should not affect how many candidates in a row.
+        previousDivider.setAttribute('style', 'flex-grow: 0')
+      }
     }
   }
   rowItemCount.push(itemCount)