feat: Improve Mobile Responsiveness Across Application

apps/web/src/app/(v2)/chat/threads/page.tsx

@@ -159,44 +159,48 @@ function AllThreadsPageContent() {
               className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10"
             />
           </div>
-          <div className="flex items-center gap-1">
-            <Filter className="text-muted-foreground h-4 w-4" />
-            <span className="text-muted-foreground mr-2 text-xs">Filter:</span>
-            {(
-              [
-                "all",
-                "running",
-                "completed",
-                "failed",
-                "pending",
-                "idle",
-                "paused",
-                "error",
-              ] as FilterStatus[]
-            ).map((status) => (
-              <Button
-                key={status}
-                variant={statusFilter === status ? "secondary" : "ghost"}
-                size="sm"
-                className={cn(
-                  "h-7 text-xs",
-                  statusFilter === status
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-                onClick={() => setStatusFilter(status)}
-              >
-                {status === "all"
-                  ? "All"
-                  : status.charAt(0).toUpperCase() + status.slice(1)}
-                <Badge
-                  variant="secondary"
-                  className="bg-muted/70 text-muted-foreground ml-1 text-xs"
+          <div className="flex flex-wrap items-center gap-1 sm:gap-2">
+            <Filter className="text-muted-foreground hidden h-4 w-4 sm:block" />
+            <span className="text-muted-foreground mr-2 hidden text-xs sm:inline">
+              Filter:
+            </span>
+            <div className="flex flex-wrap gap-1">
+              {(
+                [
+                  "all",
+                  "running",
+                  "completed",
+                  "failed",
+                  "pending",
+                  "idle",
+                  "paused",
+                  "error",
+                ] as FilterStatus[]
+              ).map((status) => (
+                <Button
+                  key={status}
+                  variant={statusFilter === status ? "secondary" : "ghost"}
+                  size="sm"
+                  className={cn(
+                    "h-7 text-xs",
+                    statusFilter === status
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  )}
+                  onClick={() => setStatusFilter(status)}
                 >
-                  {statusCounts[status]}
-                </Badge>
-              </Button>
-            ))}
+                  {status === "all"
+                    ? "All"
+                    : status.charAt(0).toUpperCase() + status.slice(1)}
+                  <Badge
+                    variant="secondary"
+                    className="bg-muted/70 text-muted-foreground ml-1 text-xs"
+                  >
+                    {statusCounts[status]}
+                  </Badge>
+                </Button>
+              ))}
+            </div>
           </div>
         </div>
       </div>

apps/web/src/components/v2/default-view.tsx

@@ -123,7 +123,7 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
   return (
     <div className="flex flex-1 flex-col">
       {/* Header */}
-      <div className="border-border bg-card border-b px-4 py-2">
+      <div className="border-border bg-card border-b px-3 py-2 sm:px-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <OpenSWELogoSVG
@@ -146,7 +146,7 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
 
       {/* Main Content */}
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-4xl space-y-6 p-4">
+        <div className="mx-auto max-w-4xl space-y-6 p-3 sm:p-4 md:p-6">
           <GitHubInstallationBanner />
           <ApiKeyBanner />
           <IssuesRequiredBanner />
@@ -160,7 +160,7 @@ export function DefaultView({ threads, threadsLoading }: DefaultViewProps) {
             )}
             ref={dropRef}
           >
-            <CardContent className="p-4">
+            <CardContent className="p-3 sm:p-4">
               <ContentBlocksPreview
                 blocks={contentBlocks}
                 onRemove={removeBlock}

apps/web/src/components/v2/manager-chat.tsx

@@ -77,6 +77,7 @@ interface ManagerChatProps {
     name: string | null;
     email: string | null;
   };
+  isMobile?: boolean;
   disableSubmit?: boolean;
 }
 
@@ -163,10 +164,13 @@ export function ManagerChat({
   cancelRun,
   errorState,
   githubUser,
+  isMobile = false,
   disableSubmit,
 }: ManagerChatProps) {
   return (
-    <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col overflow-hidden border-r">
+    <div
+      className={`border-border bg-muted/30 flex h-full flex-col overflow-hidden ${isMobile ? "w-full" : "w-1/3 border-r"}`}
+    >
       <div className="relative flex-1">
         <StickToBottom
           className="absolute inset-0"

apps/web/src/components/v2/thread-card.tsx

@@ -129,20 +129,20 @@ export function ThreadCard({
   return (
     <Card
       key={thread.id}
-      className="border-border bg-card hover:bg-muted/50 hover:shadow-primary/3 hover:border-primary/10 group cursor-pointer px-0 py-3 transition-all duration-200 hover:shadow-md"
+      className="border-border bg-card hover:bg-muted/50 hover:shadow-primary/3 hover:border-primary/10 group cursor-pointer px-3 py-3 transition-all duration-200 hover:shadow-md sm:px-4"
       onClick={() => {
         router.push(`/chat/${thread.id}`);
       }}
     >
-      <CardHeader>
+      <CardHeader className="px-0">
         <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0 flex-1">
+          <div className="min-w-0 flex-1 overflow-hidden">
             <CardTitle className="text-foreground line-clamp-2 text-sm leading-tight">
               <InlineMarkdownText>{threadTitle}</InlineMarkdownText>
             </CardTitle>
-            <div className="mt-1 flex items-center gap-1">
-              <GitBranch className="text-muted-foreground h-2 w-2" />
-              <span className="text-muted-foreground truncate text-xs">
+            <div className="mt-1 flex max-w-full items-center gap-1">
+              <GitBranch className="text-muted-foreground h-2 w-2 flex-shrink-0" />
+              <span className="text-muted-foreground max-w-0 flex-1 truncate text-xs">
                 {thread.repository}
               </span>
             </div>
@@ -171,7 +171,7 @@ export function ThreadCard({
           </Badge>
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <span className="text-muted-foreground text-xs">