From b9d2f0a1568811712e1932a94fcf90f8b8534f1c Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Fri, 28 Oct 2022 10:05:21 +0200
Subject: [PATCH] fix scrolltobottom button pos

---
 client/src/components/MessageWrapper.tsx | 2 +-
 client/src/components/ScrollToBottom.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index a42094c..e098ce5 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -21,7 +21,7 @@ const MessageWrapper = () => {
 
   return (
     <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col flex-shrink relative overflow-y-hidden">
-      <ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl overflow-scroll pt-4 pb-6 px-2 md:px-0">
+      <ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl overflow-y-scroll overflow-x-hidden pt-4 pb-6 px-2 md:px-0">
         {isLoading
           ? ''
           : isError
diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index de73a92..1c199c7 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -37,7 +37,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       </div>
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
+        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -mb-10')}
       >
         <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
           <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />