From 8e230fc891bc7aaf13013179bb21bab63f4e5381 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Wed, 15 Oct 2025 18:16:07 +0200
Subject: [PATCH] Fixed mobile ui

---
 src/components/MessageBox.tsx | 8 ++++----
 src/components/Sidebar.tsx    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 8cc19d5..20ad876 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -156,7 +156,7 @@ export default function MessageBox({
   const [text, setText] = useState("");
 
   return (
-    <div className="h-screen w-full flex flex-col pb-5 pl-5 gap-5">
+    <div className="h-full w-full 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 flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
+      <div className="w-full h-max flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
         {messages.map((msg) => (
           <MessageContainer
             key={msg.id}
@@ -175,7 +175,7 @@ export default function MessageBox({
           />
         ))}
       </div>
-      <div className="w-full flex gap-3 pr-5">
+      <footer className="w-full flex gap-3 pr-5 mt-auto">
         <Input
           className=""
           placeholder="Type a message..."
@@ -202,7 +202,7 @@ export default function MessageBox({
             />
           </DropdownMenuContent>
         </DropdownMenu>
-      </div>
+      </footer>
     </div>
   );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 07609ce..79f81f8 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -127,7 +127,7 @@ export default function AppSidebar({
   };
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-svh md:h-screen">
       <div
         className={cn(
           "border-r transition-all duration-300 ease-in-out overflow-hidden flex",