polish ui

WARP.md

@@ -0,0 +1 @@
+@AGENTS.md

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroup.tsx

@@ -36,7 +36,7 @@ export function WorkspaceGroup({
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
 	return (
-		<div className="flex items-center h-full gap-2">
+		<div className="flex items-center h-full">
 			{/* Project group badge */}
 			<WorkspaceGroupHeader
 				projectId={projectId}
@@ -49,7 +49,7 @@ export function WorkspaceGroup({
 
 			{/* Workspaces with colored line (collapsed shows only active tab) */}
 			<div
-				className="flex items-end h-full"
+				className="flex items-end h-full gap-1"
 				style={{
 					borderBottom: `2px solid ${projectColor}`,
 				}}

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx

@@ -53,27 +53,34 @@ export function WorkspaceGroupHeader({
 	);
 
 	return (
-		<button
-			type="button"
-			ref={(node) => {
-				drag(node);
-				drop(node);
-			}}
-			className={`
-				flex items-center justify-center
-				px-3 py-1 rounded-full
-				text-xs font-medium cursor-pointer select-none
-				transition-all shrink-0 no-drag
-				${isDragging ? "opacity-30" : "opacity-100"}
-				${isOver ? "ring-2 ring-white/20" : ""}
-			`}
-			onClick={onToggleCollapse}
+		<div
+			className="flex items-center h-full"
 			style={{
-				backgroundColor: projectColor,
-				color: "white",
+				borderBottom: `2px solid ${projectColor}`,
 			}}
 		>
-			<span className="truncate max-w-[100px]">{projectName}</span>
-		</button>
+			<button
+				type="button"
+				ref={(node) => {
+					drag(node);
+					drop(node);
+				}}
+				className={`
+					flex items-center justify-center mr-2
+					px-3 py-1 rounded-full
+					text-xs font-medium cursor-pointer select-none
+					transition-all shrink-0 no-drag
+					${isDragging ? "opacity-30" : "opacity-100"}
+					${isOver ? "ring-2 ring-white/20" : ""}
+				`}
+				onClick={onToggleCollapse}
+				style={{
+					backgroundColor: projectColor,
+					color: "white",
+				}}
+			>
+				<span className="truncate max-w-[100px]">{projectName}</span>
+			</button>
+		</div>
 	);
 }

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

@@ -76,10 +76,10 @@ export function WorkspaceItem({
 				onMouseEnter={onMouseEnter}
 				onMouseLeave={onMouseLeave}
 				className={`
-					flex items-center gap-0.5 rounded-t-md transition-all w-full shrink-0 pr-6 pl-3 h-full
+					flex items-center gap-0.5 rounded-t-md transition-all w-full shrink-0 pr-6 pl-3 h-[80%]
 					${
 						isActive
-							? "text-foreground bg-sidebar"
+							? "text-foreground bg-muted"
 							: "text-muted-foreground hover:text-foreground hover:bg-muted/30"
 					}
 					${isDragging ? "opacity-30" : "opacity-100"}