UI fix: 2

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">

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}

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">

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">

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">

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">

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)}

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">

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"
       >

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"
       >

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