diff --git a/frontend/collab-hub/app/dashboard/invitations/page.tsx b/frontend/collab-hub/app/dashboard/invitations/page.tsx
index dc93311..a0118fe 100644
--- a/frontend/collab-hub/app/dashboard/invitations/page.tsx
+++ b/frontend/collab-hub/app/dashboard/invitations/page.tsx
@@ -41,7 +41,7 @@ export default function InvitationsPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/frontend/collab-hub/app/dashboard/messages/page.tsx b/frontend/collab-hub/app/dashboard/messages/page.tsx
index 76c1498..5bfdc0c 100644
--- a/frontend/collab-hub/app/dashboard/messages/page.tsx
+++ b/frontend/collab-hub/app/dashboard/messages/page.tsx
@@ -233,7 +233,7 @@ export default function MessagesPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
@@ -251,7 +251,7 @@ export default function MessagesPage() {
             onCreateChannel={() => setIsCreateChannelDialogOpen(true)}
           />
 
-          <div className="flex-1 flex flex-col min-h-0">
+          <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
             {error && (
               <div className="border-b border-border bg-destructive/10 text-destructive text-sm px-4 py-2">
                 {error}
diff --git a/frontend/collab-hub/app/dashboard/notifications/page.tsx b/frontend/collab-hub/app/dashboard/notifications/page.tsx
index f5aa0dc..a7bec8d 100644
--- a/frontend/collab-hub/app/dashboard/notifications/page.tsx
+++ b/frontend/collab-hub/app/dashboard/notifications/page.tsx
@@ -41,7 +41,7 @@ export default function NotificationsPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/frontend/collab-hub/app/dashboard/page.tsx b/frontend/collab-hub/app/dashboard/page.tsx
index 7a39ec8..91d0aea 100644
--- a/frontend/collab-hub/app/dashboard/page.tsx
+++ b/frontend/collab-hub/app/dashboard/page.tsx
@@ -156,7 +156,7 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden min-h-0">
diff --git a/frontend/collab-hub/app/dashboard/projects/[id]/members/page.tsx b/frontend/collab-hub/app/dashboard/projects/[id]/members/page.tsx
index 37ee623..4a0aa7f 100644
--- a/frontend/collab-hub/app/dashboard/projects/[id]/members/page.tsx
+++ b/frontend/collab-hub/app/dashboard/projects/[id]/members/page.tsx
@@ -56,7 +56,7 @@ export default function ProjectMembersPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/frontend/collab-hub/app/dashboard/projects/[id]/page.tsx b/frontend/collab-hub/app/dashboard/projects/[id]/page.tsx
index 669b1fd..1600077 100644
--- a/frontend/collab-hub/app/dashboard/projects/[id]/page.tsx
+++ b/frontend/collab-hub/app/dashboard/projects/[id]/page.tsx
@@ -75,7 +75,7 @@ export default function ProjectDetailPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/frontend/collab-hub/app/dashboard/tasks/page.tsx b/frontend/collab-hub/app/dashboard/tasks/page.tsx
index 75ef3ed..cc051f3 100644
--- a/frontend/collab-hub/app/dashboard/tasks/page.tsx
+++ b/frontend/collab-hub/app/dashboard/tasks/page.tsx
@@ -293,7 +293,7 @@ export default function TasksPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar
         projects={projects}
         onCreateProject={() => setIsCreateProjectDialogOpen(true)}
diff --git a/frontend/collab-hub/app/dashboard/team/page.tsx b/frontend/collab-hub/app/dashboard/team/page.tsx
index 8c3e959..80222d5 100644
--- a/frontend/collab-hub/app/dashboard/team/page.tsx
+++ b/frontend/collab-hub/app/dashboard/team/page.tsx
@@ -56,7 +56,7 @@ export default function TeamPage() {
   }
 
   return (
-    <div className="flex min-h-screen md:h-screen bg-background">
+    <div className="flex h-full min-h-0 bg-background">
       <Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/frontend/collab-hub/components/chat/channel-list.tsx b/frontend/collab-hub/components/chat/channel-list.tsx
index 733a9f3..a4eadb6 100644
--- a/frontend/collab-hub/components/chat/channel-list.tsx
+++ b/frontend/collab-hub/components/chat/channel-list.tsx
@@ -117,7 +117,7 @@ export function ChannelList({
   }
 
   return (
-    <div className="w-full md:w-64 border-b md:border-b-0 md:border-r border-border bg-card flex flex-col h-full min-h-0">
+    <div className="w-full md:w-64 border-b md:border-b-0 md:border-r border-border bg-card flex flex-col h-full min-h-0 overflow-hidden">
       <div className="p-4 border-b border-border">
         <div className="flex items-center justify-between">
           <h2 className="font-semibold text-card-foreground">Channels</h2>
@@ -128,7 +128,7 @@ export function ChannelList({
       </div>
 
       <ScrollArea
-        className="flex-1 p-2"
+        className="flex-1 min-h-0 p-2"
         scrollbarClassName="bg-emerald-500/10"
         thumbClassName="bg-emerald-500/70 hover:bg-emerald-500"
       >
diff --git a/frontend/collab-hub/components/dashboard/sidebar.tsx b/frontend/collab-hub/components/dashboard/sidebar.tsx
index 43547f3..bb591d8 100644
--- a/frontend/collab-hub/components/dashboard/sidebar.tsx
+++ b/frontend/collab-hub/components/dashboard/sidebar.tsx
@@ -56,7 +56,12 @@ export function Sidebar({ projects, onCreateProject, onNavigate, className }: Si
   ]
 
   return (
-    <div className={cn("flex h-full min-h-0 w-64 flex-col bg-sidebar border-r border-sidebar-border", className)}>
+    <div
+      className={cn(
+        "flex h-full min-h-0 w-64 flex-col overflow-hidden bg-sidebar border-r border-sidebar-border",
+        className,
+      )}
+    >
       {/* Header */}
       <div className="flex h-16 items-center px-6 border-b border-sidebar-border">
         <div className="flex items-center space-x-2">
@@ -68,7 +73,7 @@ export function Sidebar({ projects, onCreateProject, onNavigate, className }: Si
       </div>
 
       <ScrollArea
-        className="flex-1 px-3 py-4"
+        className="flex-1 min-h-0 px-3 py-4"
         scrollbarClassName="bg-emerald-500/10"
         thumbClassName="bg-emerald-500/70 hover:bg-emerald-500"
       >
diff --git a/frontend/collab-hub/components/ui/scroll-area.tsx b/frontend/collab-hub/components/ui/scroll-area.tsx
index cc9e11a..bbf7e81 100644
--- a/frontend/collab-hub/components/ui/scroll-area.tsx
+++ b/frontend/collab-hub/components/ui/scroll-area.tsx
@@ -20,7 +20,7 @@ function ScrollArea({
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn("relative overflow-hidden", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport