From bcd58e40dd72c3a102b0c52372ae3b97d86974e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Tue, 3 Mar 2026 21:57:00 +0100
Subject: [PATCH] fix: prettify scrollbar, tweak height

---
 src/components/editor/EmojiSuggestionList.tsx   | 11 ++++++-----
 src/components/editor/ProfileSuggestionList.tsx | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/EmojiSuggestionList.tsx b/src/components/editor/EmojiSuggestionList.tsx
index b240b9a..24bbf6e 100644
--- a/src/components/editor/EmojiSuggestionList.tsx
+++ b/src/components/editor/EmojiSuggestionList.tsx
@@ -120,7 +120,10 @@ export const EmojiSuggestionList = forwardRef<
     );
   }
 
-  const listHeight = Math.min(items.length, MAX_VISIBLE) * ITEM_HEIGHT;
+  const listHeight = Math.max(
+    Math.min(items.length, MAX_VISIBLE) * ITEM_HEIGHT,
+    ITEM_HEIGHT + 8,
+  );
 
   return (
     <div
@@ -131,10 +134,8 @@ export const EmojiSuggestionList = forwardRef<
         ref={virtuosoRef}
         totalCount={items.length}
         fixedItemHeight={ITEM_HEIGHT}
-        style={{
-          height: listHeight,
-          overflow: items.length <= MAX_VISIBLE ? "hidden" : "auto",
-        }}
+        style={{ height: listHeight }}
+        className="overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/60 [&::-webkit-scrollbar-track]:bg-transparent"
         itemContent={renderItem}
       />
     </div>
diff --git a/src/components/editor/ProfileSuggestionList.tsx b/src/components/editor/ProfileSuggestionList.tsx
index fbc2ef4..6f4fd74 100644
--- a/src/components/editor/ProfileSuggestionList.tsx
+++ b/src/components/editor/ProfileSuggestionList.tsx
@@ -125,7 +125,10 @@ export const ProfileSuggestionList = forwardRef<
     );
   }
 
-  const listHeight = Math.min(items.length, MAX_VISIBLE) * ITEM_HEIGHT;
+  const listHeight = Math.max(
+    Math.min(items.length, MAX_VISIBLE) * ITEM_HEIGHT,
+    ITEM_HEIGHT + 8,
+  );
 
   return (
     <div
@@ -136,10 +139,8 @@ export const ProfileSuggestionList = forwardRef<
         ref={virtuosoRef}
         totalCount={items.length}
         fixedItemHeight={ITEM_HEIGHT}
-        style={{
-          height: listHeight,
-          overflow: items.length <= MAX_VISIBLE ? "hidden" : "auto",
-        }}
+        style={{ height: listHeight }}
+        className="overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/60 [&::-webkit-scrollbar-track]:bg-transparent"
         itemContent={renderItem}
       />
     </div>