feat: Enhance dashboard responsiveness across various pages and update project visibility icons for improved clarity.

components/layout/header.tsx

@@ -24,7 +24,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from '@/components/ui/sheet';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { cn } from '@/lib/utils';
 
@@ -62,7 +62,7 @@ export function Header({ user }: HeaderProps) {
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="px-6 lg:px-8 flex h-14 items-center w-full">
+      <div className="px-4 md:px-6 lg:px-8 flex h-14 items-center w-full">
         {/* Mobile menu */}
         <Sheet>
           <SheetTrigger asChild>
@@ -72,7 +72,9 @@ export function Header({ user }: HeaderProps) {
             </Button>
           </SheetTrigger>
           <SheetContent side="left" className="w-64">
-            <nav className="flex flex-col gap-2 mt-4">
+            <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
+            <SheetDescription className="sr-only">Access your projects and workspaces</SheetDescription>
+            <nav className="flex flex-col gap-2 mt-10">
               {navItems.map((item) => (
                 <Link
                   key={item.href}
@@ -124,7 +126,7 @@ export function Header({ user }: HeaderProps) {
           <ThemeToggle />
 
           {user ? (
-            <DropdownMenu>
+            <DropdownMenu modal={false}>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                   <Avatar className="h-8 w-8">