Added state structure #19

src/components/MessageBox.tsx

@@ -156,7 +156,7 @@ export default function MessageBox({
   const [text, setText] = useState("");
 
   return (
-    <div className="h-full w-full flex flex-col pb-5 pl-5 gap-5">
+    <div className="h-full w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span onClick={toggleSidebar} className="cursor-pointer flex">
@@ -165,7 +165,7 @@ export default function MessageBox({
           </span>
         </header>
       )}
-      <div className="w-full h-max flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
+      <div className="w-full h-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
         {messages.map((msg) => (
           <MessageContainer
             key={msg.id}