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/activity/ActivityLog.tsx

@@ -346,10 +346,10 @@ export function ActivityLog() {
   /* ------------------------------ UI ------------------------------ */
 
   return (
-    <div className='flex flex-col gap-y-8'>
-      <div className='flex w-full flex-row items-center gap-4'>
+    <div className='flex flex-col gap-y-4 sm:gap-y-8'>
+      <div className='flex w-full flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4'>
         {/* search input */}
-        <div className='relative flex-1'>
+        <div className='relative w-full sm:flex-1'>
           <Search className='absolute left-2 top-2.5 h-4 w-4 text-muted-foreground' />
           <input
             type='text'
@@ -365,6 +365,8 @@ export function ActivityLog() {
           />
         </div>
 
+        {/* Filter controls row */}
+        <div className='flex flex-row items-center gap-2 w-full sm:w-auto'>
           {/* status select */}
           <Select
             value={filter.status || 'all'}
@@ -375,7 +377,7 @@ export function ActivityLog() {
               }))
             }
           >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
+            <SelectTrigger className='h-9 w-full sm:w-[140px] max-h-9'>
               <SelectValue placeholder='All Status' />
             </SelectTrigger>
             <SelectContent>
@@ -387,21 +389,14 @@ export function ActivityLog() {
             </SelectContent>
           </Select>
 
-        {/* repo/org name combobox */}
-        <ActivityNameCombobox
-          activities={activities}
-          value={filter.name || ''}
-          onChange={(name) => setFilter((p) => ({ ...p, name }))}
-        />
-
-        {/* type select */}
+          {/* type select - hidden on mobile */}
           <Select
             value={filter.type || 'all'}
             onValueChange={(v) =>
               setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
             }
           >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
+            <SelectTrigger className='h-9 w-[140px] max-h-9 hidden sm:flex'>
               <SelectValue placeholder='All Types' />
             </SelectTrigger>
             <SelectContent>
@@ -412,14 +407,26 @@ export function ActivityLog() {
               ))}
             </SelectContent>
           </Select>
+        </div>
 
-        {/* export dropdown */}
+        {/* repo/org name combobox - hidden on mobile */}
+        <div className='hidden sm:block'>
+          <ActivityNameCombobox
+            activities={activities}
+            value={filter.name || ''}
+            onChange={(name) => setFilter((p) => ({ ...p, name }))}
+          />
+        </div>
+
+        {/* Action buttons row */}
+        <div className='flex items-center gap-2 ml-auto'>
+          {/* export dropdown - text hidden on mobile */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-            <Button variant='outline' className='flex items-center gap-1'>
-              <Download className='mr-1 h-4 w-4' />
-              Export
-              <ChevronDown className='ml-1 h-4 w-4' />
+              <Button variant='outline' size='sm' className='flex items-center gap-1'>
+                <Download className='h-4 w-4' />
+                <span className='hidden sm:inline'>Export</span>
+                <ChevronDown className='h-4 w-4 hidden sm:inline' />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
@@ -438,6 +445,7 @@ export function ActivityLog() {
             size="icon"
             onClick={() => fetchActivities(false)} // Manual refresh, show loading skeleton
             title="Refresh activity log"
+            className='h-8 w-8 sm:h-9 sm:w-9'
           >
             <RefreshCw className='h-4 w-4' />
           </Button>
@@ -448,11 +456,12 @@ export function ActivityLog() {
             size="icon"
             onClick={handleCleanupClick}
             title="Delete all activities"
-          className="text-destructive hover:text-destructive"
+            className="text-destructive hover:text-destructive h-8 w-8 sm:h-9 sm:w-9"
           >
             <Trash2 className='h-4 w-4' />
           </Button>
         </div>
+      </div>
 
       {/* activity list */}
       <ActivityList

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 ? (
             <>
+              {/* 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} className="hidden sm:inline-flex">
+                <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 />

src/components/organizations/AddOrganizationDialog.tsx

@@ -63,12 +63,12 @@ export default function AddOrganizationDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Organization</DialogTitle>
           <DialogDescription>

src/components/organizations/Organization.tsx

@@ -293,10 +293,10 @@ export function Organization() {
 
 
   return (
-    <div className="flex flex-col gap-y-8">
-      {/* Combine search and actions into a single flex row */}
-      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
-        <div className="relative flex-grow">
+    <div className="flex flex-col gap-y-4 sm:gap-y-8">
+      {/* Search and filters */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full">
+        <div className="relative w-full sm:flex-grow">
           <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
           <input
             type="text"
@@ -309,6 +309,8 @@ export function Organization() {
           />
         </div>
 
+        {/* Filter controls */}
+        <div className="flex items-center gap-2 w-full sm:w-auto">
           {/* Membership Role Filter */}
           <Select
             value={filter.membershipRole || "all"}
@@ -319,7 +321,7 @@ export function Organization() {
               }))
             }
           >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectTrigger className="w-full sm:w-[140px] h-9 max-h-9">
               <SelectValue placeholder="All Roles" />
             </SelectTrigger>
             <SelectContent>
@@ -355,7 +357,7 @@ export function Organization() {
               }))
             }
           >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectTrigger className="w-full sm:w-[140px] h-9 max-h-9">
               <SelectValue placeholder="All Statuses" />
             </SelectTrigger>
             <SelectContent>
@@ -376,25 +378,33 @@ export function Organization() {
               ))}
             </SelectContent>
           </Select>
+        </div>
 
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 ml-auto">
           <Button
             variant="outline"
             size="icon"
             onClick={handleRefresh}
             title="Refresh organizations"
+            className="h-8 w-8 sm:h-9 sm:w-9"
           >
             <RefreshCw className="h-4 w-4" />
           </Button>
 
           <Button
             variant="default"
+            size="sm"
             onClick={handleMirrorAllOrgs}
             disabled={isLoading || loadingOrgIds.size > 0}
+            className="sm:size-default"
           >
             <FlipHorizontal className="h-4 w-4 mr-2" />
-          Mirror All
+            <span className="hidden sm:inline">Mirror All</span>
+            <span className="sm:hidden">Mirror</span>
           </Button>
         </div>
+      </div>
 
       <OrganizationList
         organizations={organizations}

src/components/repositories/AddRepositoryDialog.tsx

@@ -60,12 +60,12 @@ export default function AddRepositoryDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Repository</DialogTitle>
           <DialogDescription>