fix(ui): responsive tab bar, activity row wrapping, and layout tweaks

Make PageTabBar render a native select on mobile, allow ActivityRow text
to wrap on narrow viewports, and minor layout adjustments in AgentDetail
and Issues pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/ActivityRow.tsx

@@ -105,7 +105,7 @@ export function ActivityRow({ event, agentMap, entityNameMap, className }: Activ
   return (
     <div
       className={cn(
-        "px-4 py-2 flex items-center justify-between gap-2 text-sm",
+        "px-4 py-2 flex flex-wrap items-center justify-between gap-x-2 gap-y-0.5 text-sm",
         link && "cursor-pointer hover:bg-accent/50 transition-colors",
         className,
       )}

ui/src/components/PageTabBar.tsx

@@ -1,12 +1,37 @@
 import type { ReactNode } from "react";
 import { TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useSidebar } from "../context/SidebarContext";
 
 export interface PageTabItem {
   value: string;
   label: ReactNode;
 }
 
-export function PageTabBar({ items }: { items: PageTabItem[] }) {
+interface PageTabBarProps {
+  items: PageTabItem[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function PageTabBar({ items, value, onValueChange }: PageTabBarProps) {
+  const { isMobile } = useSidebar();
+
+  if (isMobile && value !== undefined && onValueChange) {
+    return (
+      <select
+        value={value}
+        onChange={(e) => onValueChange(e.target.value)}
+        className="h-8 rounded-md border border-border bg-background px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+      >
+        {items.map((item) => (
+          <option key={item.value} value={item.value}>
+            {typeof item.label === "string" ? item.label : item.value}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
   return (
     <TabsList variant="line">
       {items.map((item) => (