feat: improve mobile layout across components

- Update ActivityLog component for better mobile responsiveness
- Enhance Header layout for mobile devices
- Improve mobile UX in AddOrganizationDialog
- Optimize Organization component mobile display
- Enhance AddRepositoryDialog mobile layout

src/components/layout/Header.tsx

@@ -7,7 +7,13 @@ import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useLiveRefresh } from "@/hooks/useLiveRefresh";
 import { useConfigStatus } from "@/hooks/useConfigStatus";
-import { Menu } from "lucide-react";
+import { Menu, LogOut } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface HeaderProps {
   currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
@@ -60,9 +66,9 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
         <div className="flex items-center gap-2">
           {/* Hamburger Menu Button - Mobile Only */}
           <Button
-            variant="ghost"
-            size="sm"
-            className="lg:hidden p-2"
+            variant="outline"
+            size="lg"
+            className="lg:hidden"
             onClick={onMenuClick}
           >
             <Menu className="h-5 w-5" />
@@ -96,12 +102,12 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
           {showLiveButton && (
             <Button
               variant="outline"
-              size="sm"
-              className="flex items-center gap-2 sm:px-4"
+              size="lg"
+              className="flex items-center gap-1.5 px-3 sm:px-4"
               onClick={toggleLive}
               title={getTooltip()}
             >
-              <div className={`w-3 h-3 rounded-full ${
+              <div className={`size-4 sm:size-3 rounded-full ${
                 configLoading
                   ? 'bg-yellow-400 animate-pulse'
                   : isLiveActive
@@ -110,7 +116,7 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
                       ? 'bg-orange-400'
                       : 'bg-gray-500'
               }`} />
-              <span className="hidden sm:inline">LIVE</span>
+              <span className="text-sm font-medium hidden sm:inline">LIVE</span>
             </Button>
           )}
 
@@ -120,15 +126,40 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
             <AuthButtonsSkeleton />
           ) : user ? (
             <>
-              <Avatar>
-                <AvatarImage src="" alt="@shadcn" />
-                <AvatarFallback>
-                  {user.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <Button variant="outline" size="sm" onClick={handleLogout} className="hidden sm:inline-flex">
-                Logout
-              </Button>
+              {/* Desktop: Show avatar and logout button */}
+              <div className="hidden sm:flex sm:items-center sm:gap-4">
+                <Avatar>
+                  <AvatarImage src="" alt="@shadcn" />
+                  <AvatarFallback>
+                    {user.username.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <Button variant="outline" size="sm" onClick={handleLogout}>
+                  Logout
+                </Button>
+              </div>
+              
+              {/* Mobile: Avatar with dropdown */}
+              <div className="sm:hidden">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="lg" className="relative h-10 w-10 rounded-full p-0">
+                      <Avatar className="h-full w-full">
+                        <AvatarImage src="" alt="@shadcn" />
+                        <AvatarFallback>
+                          {user.username.charAt(0).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48">
+                    <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
+                      <LogOut className="h-4 w-4 mr-2" />
+                      Logout
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             </>
           ) : (
             <Button variant="outline" size="sm" asChild>

src/components/layout/Sidebar.tsx

@@ -78,7 +78,7 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
         )}
       >
         <div className="flex flex-col h-full pt-4">
-          <nav className="flex flex-col gap-y-1 pl-2 pr-3">
+          <nav className="flex flex-col gap-y-1 lg:gap-y-1 pl-2 pr-3">
             {links.map((link, index) => {
               const isActive = currentPath === link.href;
               const Icon = link.icon;
@@ -88,13 +88,13 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
                   key={index}
                   onClick={(e) => handleNavigation(link.href, e)}
                   className={cn(
-                    "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors w-full text-left",
+                    "flex items-center gap-3 rounded-md px-3 py-3 lg:py-2 text-sm lg:text-sm font-medium transition-colors w-full text-left",
                     isActive
                       ? "bg-primary text-primary-foreground"
                       : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   )}
                 >
-                  <Icon className="h-4 w-4" />
+                  <Icon className="h-5 w-5 lg:h-4 lg:w-4" />
                   {link.label}
                 </button>
               );
@@ -102,19 +102,19 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
           </nav>
 
           <div className="mt-auto px-4 py-4">
-            <div className="rounded-md bg-muted p-3">
+            <div className="rounded-md bg-muted p-3 lg:p-3">
               <h4 className="text-sm font-medium mb-2">Need Help?</h4>
-              <p className="text-xs text-muted-foreground mb-2">
+              <p className="text-xs text-muted-foreground mb-3 lg:mb-2">
                 Check out the documentation for help with setup and configuration.
               </p>
               <a
                 href="/docs"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 text-xs text-primary hover:underline"
+                className="inline-flex items-center gap-1.5 text-xs lg:text-xs text-primary hover:underline py-2 lg:py-0"
               >
                 Documentation
-                <ExternalLink className="h-3 w-3" />
+                <ExternalLink className="h-3.5 w-3.5 lg:h-3 lg:w-3" />
               </a>
             </div>
             <VersionInfo />