Test icon tweaks

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -314,13 +314,13 @@ export default function Page() {
                                     icon={RunsIcon}
                                     to={runsPath}
                                     title="View runs"
-                                    leadingIconClassName="text-runs"
+                                    leadingIconClassName="-mx-1 text-runs"
                                   />
                                   <PopoverMenuItem
                                     icon={BeakerIcon}
                                     to={testPath}
                                     title="Test task"
-                                    leadingIconClassName="text-tests"
+                                    leadingIconClassName="-mx-1 text-tests"
                                   />
                                 </>
                               }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx

@@ -311,7 +311,7 @@ function AgentDetailSidebar({
                 to={playgroundPath}
                 LeadingIcon={BeakerIcon}
                 iconSpacing="gap-x-2"
-                leadingIconClassName="-mx-2 text-tests"
+                leadingIconClassName="-mx-2"
               >
                 Test
               </LinkButton>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents._index/route.tsx

@@ -343,7 +343,7 @@ export default function AgentsPage() {
                                   icon={RunsIcon}
                                   to={runsPath}
                                   title="View runs"
-                                  leadingIconClassName="text-runs"
+                                  leadingIconClassName="-mx-1 text-runs"
                                 />
                                 <PopoverMenuItem
                                   icon={BeakerIcon}
@@ -354,7 +354,7 @@ export default function AgentsPage() {
                                     agent.slug
                                   )}
                                   title="Test"
-                                  leadingIconClassName="text-tests"
+                                  leadingIconClassName="-mx-1 text-tests"
                                 />
                               </>
                             }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx

@@ -224,10 +224,10 @@ function TaskDetailSidebar({ task, testPath }: { task: TaskDetail; testPath: str
                 variant="primary/small"
                 to={testPath}
                 LeadingIcon={BeakerIcon}
-                iconSpacing="gap-x-1"
-                leadingIconClassName="-mx-1.5 text-tests"
+                iconSpacing="gap-x-2"
+                leadingIconClassName="-mx-2"
               >
-                Test task
+                Test
               </LinkButton>
             </Property.Value>
           </Property.Item>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx

@@ -1,7 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import {
-  BeakerIcon,
   StarIcon,
   RectangleStackIcon,
   TrashIcon,
@@ -79,6 +78,7 @@ import { RegionsPresenter, type Region } from "~/presenters/v3/RegionsPresenter.
 import { TestSidebarTabs } from "./TestSidebarTabs";
 import { AIPayloadTabContent } from "./AIPayloadTabContent";
 import { SchemaTabContent } from "./SchemaTabContent";
+import { BeakerIcon } from "~/assets/icons/BeakerIcon";
 
 type FormAction = "create-template" | "delete-template" | "run-scheduled" | "run-standard";
 
@@ -880,7 +880,8 @@ function StandardTaskForm({
             type="submit"
             variant="primary/medium"
             LeadingIcon={BeakerIcon}
-            leadingIconClassName="text-tests"
+            iconSpacing="gap-x-2.5"
+            leadingIconClassName="-mx-2"
             shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
             name="formAction"
             value={"run-standard" satisfies FormAction}
@@ -1458,7 +1459,8 @@ function ScheduledTaskForm({
             type="submit"
             variant="primary/medium"
             LeadingIcon={BeakerIcon}
-            leadingIconClassName="text-tests"
+            iconSpacing="gap-x-2.5"
+            leadingIconClassName="-mx-2"
             shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
             name="formAction"
             value={"run-scheduled" satisfies FormAction}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test/route.tsx

@@ -95,7 +95,13 @@ export default function Page() {
           <MainCenteredContainer className="max-w-md">
             <TestHasNoTasks />
           </MainCenteredContainer>
+        ) : taskParam ? (
+          // Task selected via URL → skip the picker; the child route owns the page.
+          <Outlet key={taskParam} />
         ) : (
+          // No task in URL: show the picker as a fallback so users landing on
+          // /test (e.g. from the runs blank state with multiple task filters)
+          // can still choose one.
           <div className={cn("grid h-full max-h-full grid-cols-1")}>
             <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
               <ResizablePanel id="test-selector" min="200px" default="20%">