From b72279afe4cb30825b6e26ad44c54e4d1704dffc Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Fri, 20 Mar 2026 06:39:04 -0500
Subject: [PATCH] Clean up routine activity tab: remove pill badges, use inline
 text

Replace the cluttered rounded-full bordered pills around each activity
detail with clean inline text separated by dot separators. Wrap in a
bordered card container matching the runs tab style.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/pages/RoutineDetail.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/ui/src/pages/RoutineDetail.tsx b/ui/src/pages/RoutineDetail.tsx
index 48d55517..93929734 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@@ -1004,20 +1004,24 @@ export function RoutineDetail() {
           {(activity ?? []).length === 0 ? (
             <p className="text-xs text-muted-foreground">No activity yet.</p>
           ) : (
-            <div className="space-y-1.5">
+            <div className="border border-border rounded-lg divide-y divide-border">
               {(activity ?? []).map((event) => (
-                <div key={event.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <span className="font-medium text-foreground/80">{event.action.replaceAll(".", " ")}</span>
-                  {event.details && Object.keys(event.details).length > 0 && (
-                    <>
-                      {Object.entries(event.details).slice(0, 3).map(([key, value]) => (
-                        <span key={key} className="rounded-full border border-border px-1.5 py-0.5">
-                          {key.replaceAll("_", " ")}: {formatActivityDetailValue(value)}
-                        </span>
-                      ))}
-                    </>
-                  )}
-                  <span className="ml-auto shrink-0">{timeAgo(event.createdAt)}</span>
+                <div key={event.id} className="flex items-center justify-between px-3 py-2 text-xs gap-4">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="font-medium text-foreground/90 shrink-0">{event.action.replaceAll(".", " ")}</span>
+                    {event.details && Object.keys(event.details).length > 0 && (
+                      <span className="text-muted-foreground truncate">
+                        {Object.entries(event.details).slice(0, 3).map(([key, value], i) => (
+                          <span key={key}>
+                            {i > 0 && <span className="mx-1 text-border">·</span>}
+                            <span className="text-muted-foreground/70">{key.replaceAll("_", " ")}:</span>{" "}
+                            {formatActivityDetailValue(value)}
+                          </span>
+                        ))}
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-muted-foreground/60 shrink-0">{timeAgo(event.createdAt)}</span>
                 </div>
               ))}
             </div>