From fba42b531b307e435f0358b5d20b313f314d6249 Mon Sep 17 00:00:00 2001
From: tassoman <tassoman@gmail.com>
Date: Sun, 15 Oct 2023 02:16:27 +0200
Subject: [PATCH] adding tailwind snap effect to scrolled autosuggested items

---
 src/features/compose/components/autosuggest-account.tsx    | 6 +++++-
 src/features/compose/editor/plugins/autosuggest-plugin.tsx | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/features/compose/components/autosuggest-account.tsx b/src/features/compose/components/autosuggest-account.tsx
index 7ea61481a..d3b3a295f 100644
--- a/src/features/compose/components/autosuggest-account.tsx
+++ b/src/features/compose/components/autosuggest-account.tsx
@@ -11,7 +11,11 @@ const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {
   const { account } = useAccount(id);
   if (!account) return null;
 
-  return <Account account={account} hideActions showProfileHoverCard={false} />;
+  return (
+    <div className='snap-start snap-always'>
+      <Account account={account} hideActions showProfileHoverCard={false} />
+    </div>
+  );
 
 };
 
diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index e4fd4a2de..ee5729059 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -378,8 +378,8 @@ const AutosuggestPlugin = ({
         key={key}
         data-index={i}
         className={clsx({
-          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
-          'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
+          'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
+          'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
         onMouseDown={handleSelectSuggestion}
       >
@@ -538,7 +538,7 @@ const AutosuggestPlugin = ({
           ? ReactDOM.createPortal(
             <div
               className={clsx({
-                'mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
+                'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
                 hidden: suggestionsHidden || suggestions.isEmpty(),
                 block: !suggestionsHidden && !suggestions.isEmpty(),
               })}