From f5e44837828ef4941d2948864de06301a88cfdd5 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 9 Jun 2026 22:57:11 +0000
Subject: [PATCH] =?UTF-8?q?fix(ui):=20routines=20list=20=E2=80=94=20border?=
 =?UTF-8?q?=20the=20group=20headers,=20leave=20items=20borderless=20(PAP-1?=
 =?UTF-8?q?0748)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to feedback: the whole-group card put a border around the items.
Per the clarification ("borders around the group headers, no border around
the items"), drop the enclosing card border and instead border just the
group header as its own rounded box; routine rows render with no border at
all (no enclosure, no dividers).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/pages/Routines.tsx                             | 5 ++---
 ui/storybook/stories/routines-list-groups.stories.tsx | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Routines.tsx b/ui/src/pages/Routines.tsx
index ad1822f83bb..35cf0321435 100644
--- a/ui/src/pages/Routines.tsx
+++ b/ui/src/pages/Routines.tsx
@@ -899,12 +899,11 @@ export function Routines() {
                           : [...routineViewState.collapsedGroups, group.key],
                       });
                     }}
-                    className="overflow-hidden rounded-lg border border-border"
                   >
                     {group.label ? (
                       <div
-                        className={`flex items-center gap-2 px-3 py-2${
-                          isOpen ? " border-b border-border" : ""
+                        className={`flex items-center gap-2 rounded-lg border border-border px-3 py-2${
+                          isOpen ? " mb-1" : ""
                         }`}
                       >
                         <CollapsibleTrigger className="flex items-center gap-1.5">
diff --git a/ui/storybook/stories/routines-list-groups.stories.tsx b/ui/storybook/stories/routines-list-groups.stories.tsx
index d0aac2ba741..cf4da482678 100644
--- a/ui/storybook/stories/routines-list-groups.stories.tsx
+++ b/ui/storybook/stories/routines-list-groups.stories.tsx
@@ -54,10 +54,9 @@ function GroupedList() {
               onOpenChange={(open) =>
                 setCollapsed((prev) => (open ? prev.filter((k) => k !== group.key) : [...prev, group.key]))
               }
-              className="overflow-hidden rounded-lg border border-border"
             >
               {group.label ? (
-                <div className={`flex items-center gap-2 px-3 py-2${isOpen ? " border-b border-border" : ""}`}>
+                <div className={`flex items-center gap-2 rounded-lg border border-border px-3 py-2${isOpen ? " mb-1" : ""}`}>
                   <CollapsibleTrigger className="flex items-center gap-1.5">
                     <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90" />
                     <span className="text-sm font-semibold uppercase tracking-wide">{group.label}</span>