Merge pull request #66 from TurunWappuradio/fix/shoutbox-autoscroll

fix: shoutbox autoscroll to bottom.
TurunWappuradio · Oct 25, 2023 · 2b93a3f · 2b93a3f
2 parents d822137 + 038ef4a
commit 2b93a3f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/components/ShoutBox/nameformatter.tsx b/components/ShoutBox/nameformatter.tsx
@@ -16,14 +16,26 @@ const NameFormatter = ({ name, timestamp, telegram }: NameFormatterProps) => {
       className={`flex items-center pr-2 text-sm font-bold ${findStyle(name)}`}
     >
       {name}
-      {telegram ? <div className="relative ml-2 w-3.5 h-3.5"><a target="_blank" rel="noreferrer" href="https://t.me/turunwappuradio"><Image layout="fill"
-        unoptimized={true} alt="Telegram" src="/telegram.svg"></Image></a></div> : null}
-      {
-        time ? (
-          <span className="pl-2 text-xs font-normal opacity-70" > {time}</span>
-        ) : null
-      }
-    </div >
+      {telegram ? (
+        <div className="relative ml-2 h-3.5 w-3.5">
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://t.me/turunwappuradio"
+          >
+            <Image
+              layout="fill"
+              unoptimized={true}
+              alt="Telegram"
+              src="/telegram.svg"
+            ></Image>
+          </a>
+        </div>
+      ) : null}
+      {time ? (
+        <span className="pl-2 text-xs font-normal opacity-70"> {time}</span>
+      ) : null}
+    </div>
   );
 };
 

diff --git a/components/ShoutBox/shoutbox.tsx b/components/ShoutBox/shoutbox.tsx
@@ -30,7 +30,7 @@ export const ChatWrapper = () => {
         <button
           onClick={handleClose}
           title="chat"
-          className="bg-orange mr-5 mt-5 h-10 w-10 rounded-full"
+          className="mr-5 mt-5 h-10 w-10 rounded-full bg-orange"
         >
           <GrFormClose size="1.7rem" className="mx-auto" />
         </button>
@@ -106,7 +106,7 @@ const Chat = ({ limit, isOpen }: ShoutBoxProps) => {
   }, []);
 
   function addMessage(message: any) {
-    setMessages((messages) => [...messages, message].slice(-limit));
+    setMessages((messages) => [message, ...messages].slice(0, limit));
   }
 
   function submitMessage(messageString: string) {
@@ -146,7 +146,7 @@ const Chat = ({ limit, isOpen }: ShoutBoxProps) => {
     <div className="mx-auto flex h-96 w-full max-w-6xl px-[25px] py-6 md:h-[38rem]">
       <div className="mx-auto my-0 h-auto w-full flex-wrap overflow-auto overflow-x-hidden shadow-md">
         <div
-          className="h-[81%] flex-col-reverse overflow-auto overflow-x-hidden px-0 py-2 text-white md:h-[85%]"
+          className="flex h-[81%] flex-col-reverse overflow-y-auto overflow-x-hidden px-0 py-2 text-white md:h-[85%]"
           ref={messagesViewport}
         >
           {messages.map((message, index) => (