From deffdc7c4f50f8b48a0244a0e7d2451148ecf59a Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 13:07:25 +0100
Subject: [PATCH] fix: Move project pills inline after initiative name

---
 apps/web/src/components/InitiativeCard.tsx | 29 ++++++++++------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/InitiativeCard.tsx b/apps/web/src/components/InitiativeCard.tsx
index 602892d..6ab41ee 100644
--- a/apps/web/src/components/InitiativeCard.tsx
+++ b/apps/web/src/components/InitiativeCard.tsx
@@ -89,11 +89,19 @@ export function InitiativeCard({ initiative, onClick }: InitiativeCardProps) {
       className="p-4"
       onClick={onClick}
     >
-      {/* Row 1: Name + overflow menu */}
-      <div className="flex items-center justify-between">
-        <span className="min-w-0 truncate text-base font-bold">
-          {initiative.name}
-        </span>
+      {/* Row 1: Name + project pills + overflow menu */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="shrink-0 text-base font-bold">
+            {initiative.name}
+          </span>
+          {initiative.projects && initiative.projects.length > 0 &&
+            initiative.projects.map((p) => (
+              <Badge key={p.id} variant="outline" size="xs" className="shrink-0 font-normal">
+                {p.name}
+              </Badge>
+            ))}
+        </div>
         <div onClick={(e) => e.stopPropagation()}>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -115,17 +123,6 @@ export function InitiativeCard({ initiative, onClick }: InitiativeCardProps) {
         </div>
       </div>
 
-      {/* Project pills */}
-      {initiative.projects && initiative.projects.length > 0 && (
-        <div className="mt-1.5 flex flex-wrap gap-1">
-          {initiative.projects.map((p) => (
-            <Badge key={p.id} variant="outline" size="xs" className="font-normal">
-              {p.name}
-            </Badge>
-          ))}
-        </div>
-      )}
-
       {/* Row 2: Activity dot + label + active phase + progress */}
       <div className="mt-1.5 flex items-center gap-3">
         <StatusDot