Changes

src/routes/dashboard.index.tsx

@@ -74,59 +74,66 @@ function IncidentsPage() {
 
   return (
     <>
-      <header className="h-16 border-b border-border flex items-center justify-between px-8 bg-surface/40 backdrop-blur">
-        <div>
+      <header className="border-b border-border px-8 py-4 bg-surface/40 backdrop-blur flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="min-w-0">
           <div className="text-[10px] uppercase tracking-widest text-muted-foreground font-mono">Operations</div>
           <h1 className="text-lg font-semibold">Incident Bot</h1>
         </div>
-        <UploadDialog onCreated={(id) => setSelectedId(id)} />
-      </header>
-
-      <div className="flex-1 grid grid-cols-1 lg:grid-cols-[340px_1fr] min-h-0">
-        {/* Incident list */}
-        <div className="border-r border-border flex flex-col min-h-0">
-          <div className="px-5 py-3 border-b border-border flex items-center justify-between">
-            <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Feed ({incidents.length})</h2>
-            <button onClick={load} className="text-muted-foreground hover:text-foreground"><RefreshCw className="h-3.5 w-3.5"/></button>
-          </div>
-          <ScrollArea className="flex-1">
-            <div className="p-3 space-y-2">
-              {loading ? (
-                <div className="text-center py-12 text-muted-foreground"><Loader2 className="h-5 w-5 animate-spin mx-auto"/></div>
-              ) : incidents.length === 0 ? (
-                <EmptyHint />
-              ) : incidents.map((i) => (
-                <button
-                  key={i.id}
-                  onClick={() => setSelectedId(i.id)}
-                  className={cn(
-                    "w-full text-left p-3 rounded-lg border transition-colors group",
-                    selectedId === i.id
-                      ? "bg-surface-elevated border-primary/50 shadow-[var(--shadow-glow)]"
-                      : "bg-surface border-border hover:border-primary/30"
-                  )}
-                >
-                  <div className="flex items-start justify-between gap-2 mb-1.5">
-                    <span className="font-medium text-sm leading-tight line-clamp-2">{i.title}</span>
-                    <SeverityBadge severity={i.severity} />
-                  </div>
-                  <div className="flex items-center gap-2 text-[10px] text-muted-foreground font-mono uppercase">
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          <Select
+            value={selectedId ?? undefined}
+            onValueChange={(v) => setSelectedId(v)}
+            disabled={loading || incidents.length === 0}
+          >
+            <SelectTrigger className="w-full sm:w-[320px]">
+              <SelectValue
+                placeholder={
+                  loading
+                    ? "Loading reports…"
+                    : incidents.length === 0
+                      ? "No reports yet"
+                      : `Select report (${incidents.length})`
+                }
+              />
+            </SelectTrigger>
+            <SelectContent className="max-h-[60vh]">
+              {incidents.map((i) => (
+                <SelectItem key={i.id} value={i.id}>
+                  <div className="flex items-center gap-2 min-w-0">
                     <StatusDot status={i.status} />
-                    <span>{i.status}</span>
-                    <span>·</span>
-                    <span>{new Date(i.created_at).toLocaleString()}</span>
+                    <span className="truncate max-w-[220px]">{i.title}</span>
+                    <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-mono shrink-0">
+                      {i.severity}
+                    </span>
                   </div>
-                </button>
+                </SelectItem>
               ))}
-            </div>
-          </ScrollArea>
+            </SelectContent>
+          </Select>
+          <Button variant="ghost" size="icon" onClick={load} aria-label="Refresh feed">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <UploadDialog onCreated={(id) => setSelectedId(id)} />
         </div>
+      </header>
 
-        {/* Detail */}
-        <ScrollArea className="bg-background">
-          {selected ? <IncidentDetail incident={selected} onRerun={() => rerun(selected.id)} onDelete={() => remove(selected.id)} /> : <DetailEmpty />}
-        </ScrollArea>
-      </div>
+      <ScrollArea className="flex-1 bg-background">
+        {loading ? (
+          <div className="py-24 text-center text-muted-foreground">
+            <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+          </div>
+        ) : incidents.length === 0 ? (
+          <EmptyHint />
+        ) : selected ? (
+          <IncidentDetail
+            incident={selected}
+            onRerun={() => rerun(selected.id)}
+            onDelete={() => remove(selected.id)}
+          />
+        ) : (
+          <DetailEmpty />
+        )}
+      </ScrollArea>
     </>
   );
 }