Improved Root badge style

Author: samejr

apps/webapp/app/components/primitives/Badge.tsx

@@ -7,7 +7,7 @@ const variants = {
   small:
     "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap",
   "extra-small":
-    "grid place-items-center rounded-full px-1.5 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
+    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
   outline:
     "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap",
   "outline-rounded":

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -612,9 +612,7 @@ function TasksTreeView({
                           className="h-4 min-h-4 w-4 min-w-4"
                         />
                         <NodeText node={node} />
-                        {node.data.isRoot && !rootRun && (
-                          <Badge variant="outline-rounded">Root</Badge>
-                        )}
+                        {node.data.isRoot && !rootRun && <Badge variant="extra-small">Root</Badge>}
                       </div>
                       <div className="flex items-center gap-1">
                         <NodeStatusIcon node={node} />
@@ -660,7 +658,7 @@ function TasksTreeView({
           />
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-2">
+      <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-4">
         <div className="grow @container">
           <div className="hidden items-center gap-4 @[42rem]:flex">
             <KeyboardShortcuts