fix: add spacing between workflow badge icon and label

apps/web/src/samples/components/Tag/BaseWorkflowTag.tsx

@@ -1,11 +1,11 @@
+import { cn } from "@app/utils";
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
-import { cn } from "@/app/utils";
 
-interface BaseWorkflowTagProps<T extends ElementType = "div"> {
+type BaseWorkflowTagProps<T extends ElementType = "div"> = {
 	as?: T;
 	children: ReactNode;
 	className?: string;
-}
+};
 
 /**
  * Base workflow tag component.
@@ -24,10 +24,10 @@ export function BaseWorkflowTag<T extends ElementType = "div">({
 	return (
 		<Component
 			className={cn(
-				"flex items-center bg-purple-800 text-white text-sm font-bold px-2 py-1.5",
+				"flex items-center gap-1.5 bg-purple-800 text-white text-sm font-bold px-2 py-1.5",
 				"first:rounded-l-sm last:rounded-r-sm",
 				"[&:not(:last-child)]:border-r-2 [&:not(:last-child)]:border-purple-400",
-				"[&_svg]:leading-[inherit] [&_span:last-child]:ml-0.5",
+				"[&_svg]:leading-[inherit]",
 				className,
 			)}
 			{...props}

apps/web/src/samples/components/Tag/WorkflowTag.tsx

@@ -3,7 +3,6 @@ import Loader from "@base/Loader";
 import type { WorkflowState } from "@samples/types";
 import { CheckCircle } from "lucide-react";
 import { BaseWorkflowTag } from "./BaseWorkflowTag";
-import { WorkflowLabelIcon } from "./WorkflowLabelIcon";
 
 type SampleItemWorkflowTagProps = {
 	displayName: string;
@@ -23,13 +22,13 @@ export default function WorkflowTag({
 }: SampleItemWorkflowTagProps) {
 	return (
 		<BaseWorkflowTag>
-			<WorkflowLabelIcon>
+			<span className="w-3.5">
 				{workflowState === "pending" ? (
 					<Loader size="10px" color="gray" />
 				) : (
 					<Icon icon={CheckCircle} size={14} />
 				)}
-			</WorkflowLabelIcon>
+			</span>
 			<span>{displayName}</span>
 		</BaseWorkflowTag>
 	);

apps/web/src/samples/components/Tag/WorkflowTags.tsx

@@ -1,7 +1,6 @@
 import { getWorkflowDisplayName } from "@app/utils";
 import Link from "@base/Link";
 import type { SampleWorkflows } from "@samples/types";
-import type { ReactElement } from "react";
 import { BaseWorkflowTag } from "./BaseWorkflowTag";
 import WorkflowTag from "./WorkflowTag";
 
@@ -21,38 +20,30 @@ type WorkflowTagsProps = {
  * @returns The workflow tags for a sample.
  */
 export default function WorkflowTags({ id, workflows }: WorkflowTagsProps) {
-	const workflowTags = Object.entries(workflows).reduce<ReactElement[]>(
-		(tags, [key, value]) => {
-			if (value === "complete" || value === "pending") {
-				tags.push(
-					<WorkflowTag
-						key={key}
-						displayName={getWorkflowDisplayName(key)}
-						workflowState={value}
-					/>,
-				);
-			}
-			return tags;
-		},
-		[],
-	);
+	const workflowTags = Object.entries(workflows)
+		.filter(([, value]) => value === "complete" || value === "pending")
+		.map(([key, value]) => (
+			<WorkflowTag
+				key={key}
+				displayName={getWorkflowDisplayName(key)}
+				workflowState={value}
+			/>
+		));
 	return (
-		<div className="flex items-center">
-			<div className="flex items-stretch">
-				<BaseWorkflowTag
-					as={Link}
-					className="bg-purple-400 border-purple-400 border-l-0"
-					to={`/samples/${id}/analyses`}
-				>
-					View
+		<div className="flex items-stretch">
+			<BaseWorkflowTag
+				as={Link}
+				className="bg-purple-400 border-purple-400 border-l-0"
+				to={`/samples/${id}/analyses`}
+			>
+				View
+			</BaseWorkflowTag>
+			{!workflowTags.length && (
+				<BaseWorkflowTag className="bg-purple-50 border border-purple-400 text-purple-900">
+					No Analyses
 				</BaseWorkflowTag>
-				{!workflowTags.length && (
-					<BaseWorkflowTag className="bg-purple-50 border border-purple-400 text-purple-900 gap-3 [&_span:last-child]:ml-0">
-						No Analyses
-					</BaseWorkflowTag>
-				)}
-				{workflowTags}
-			</div>
+			)}
+			{workflowTags}
 		</div>
 	);
 }