From 1418c976df2cc066a3a1c3f903d5d383e707a661 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 17:12:05 -0500
Subject: [PATCH] Standardize border radius to rounded-md across all route
 components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/arc-web/app/routes/pipelines.tsx        | 2 +-
 apps/arc-web/app/routes/run-overview.tsx     | 2 +-
 apps/arc-web/app/routes/run-stages.tsx       | 6 +++---
 apps/arc-web/app/routes/run-usage.tsx        | 2 +-
 apps/arc-web/app/routes/workflow-diagram.tsx | 2 +-
 apps/arc-web/app/routes/workflow-runs.tsx    | 6 +++---
 apps/arc-web/app/routes/workflows.tsx        | 4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/arc-web/app/routes/pipelines.tsx b/apps/arc-web/app/routes/pipelines.tsx
index dc298e919..65eb466db 100644
--- a/apps/arc-web/app/routes/pipelines.tsx
+++ b/apps/arc-web/app/routes/pipelines.tsx
@@ -81,7 +81,7 @@ function PrCard({
   actions?: string[];
 }) {
   return (
-    <Link to={`/runs/${pr.id}`} className="group block rounded-lg border border-white/[0.06] bg-navy-800/80 p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800 hover:shadow-lg hover:shadow-black/20">
+    <Link to={`/runs/${pr.id}`} className="group block rounded-md border border-white/[0.06] bg-navy-800/80 p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800 hover:shadow-lg hover:shadow-black/20">
       <div className="mb-2 flex items-center gap-1.5">
         <Icon className={`size-3.5 shrink-0 ${iconColor}`} />
         <span className="font-mono text-xs font-medium text-teal-500">
diff --git a/apps/arc-web/app/routes/run-overview.tsx b/apps/arc-web/app/routes/run-overview.tsx
index 4c4a12364..9ae41d59b 100644
--- a/apps/arc-web/app/routes/run-overview.tsx
+++ b/apps/arc-web/app/routes/run-overview.tsx
@@ -318,7 +318,7 @@ export default function RunOverview() {
 
       <div className="min-w-0 flex-1">
         {workflow ? (
-          <div className="rounded-lg border border-white/[0.06] bg-navy-900/40 overflow-hidden">
+          <div className="rounded-md border border-white/[0.06] bg-navy-900/40 overflow-hidden">
             <DotDiagram dot={workflow.graph} />
           </div>
         ) : (
diff --git a/apps/arc-web/app/routes/run-stages.tsx b/apps/arc-web/app/routes/run-stages.tsx
index ca47ba65f..3eae0b4e1 100644
--- a/apps/arc-web/app/routes/run-stages.tsx
+++ b/apps/arc-web/app/routes/run-stages.tsx
@@ -112,7 +112,7 @@ function ToolRow({ tool }: { tool: ToolUse }) {
 
 function ToolBlock({ tools }: { tools: ToolUse[] }) {
   return (
-    <div className="rounded-lg border border-white/[0.06] bg-white/[0.01] overflow-hidden">
+    <div className="rounded-md border border-white/[0.06] bg-white/[0.01] overflow-hidden">
       {tools.map((tool, i) => (
         <ToolRow key={i} tool={tool} />
       ))}
@@ -122,7 +122,7 @@ function ToolBlock({ tools }: { tools: ToolUse[] }) {
 
 function SystemBlock({ content }: { content: string }) {
   return (
-    <div className="rounded-lg border border-amber/10 bg-amber/5 overflow-hidden">
+    <div className="rounded-md border border-amber/10 bg-amber/5 overflow-hidden">
       <div className="flex items-center gap-2 px-3 py-2">
         <CommandLineIcon className="size-4 shrink-0 text-amber" />
         <span className="text-xs font-medium text-ice-300">System Prompt</span>
@@ -136,7 +136,7 @@ function SystemBlock({ content }: { content: string }) {
 
 function AssistantBlock({ content }: { content: string }) {
   return (
-    <div className="rounded-lg border border-teal-500/10 bg-teal-500/5 overflow-hidden">
+    <div className="rounded-md border border-teal-500/10 bg-teal-500/5 overflow-hidden">
       <div className="flex items-center gap-2 px-3 py-2">
         <ChatBubbleLeftIcon className="size-4 shrink-0 text-teal-500" />
         <span className="text-xs font-medium text-ice-300">Assistant</span>
diff --git a/apps/arc-web/app/routes/run-usage.tsx b/apps/arc-web/app/routes/run-usage.tsx
index 65e419484..c9dd9ed27 100644
--- a/apps/arc-web/app/routes/run-usage.tsx
+++ b/apps/arc-web/app/routes/run-usage.tsx
@@ -16,7 +16,7 @@ function formatTokens(n: number) {
 
 export default function RunUsage() {
   return (
-    <div className="rounded-lg border border-white/[0.06] overflow-hidden">
+    <div className="rounded-md border border-white/[0.06] overflow-hidden">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-white/[0.06] bg-navy-800/60 text-left text-xs text-navy-600">
diff --git a/apps/arc-web/app/routes/workflow-diagram.tsx b/apps/arc-web/app/routes/workflow-diagram.tsx
index df269e737..8e85e8974 100644
--- a/apps/arc-web/app/routes/workflow-diagram.tsx
+++ b/apps/arc-web/app/routes/workflow-diagram.tsx
@@ -148,7 +148,7 @@ export default function WorkflowDiagram() {
   }
 
   return (
-    <div className="relative rounded-lg border border-white/[0.06] bg-navy-900/40">
+    <div className="relative rounded-md border border-white/[0.06] bg-navy-900/40">
       <div className="absolute right-3 top-3 z-10 flex items-center gap-2">
         <div className="flex items-center gap-0.5 rounded-md border border-white/[0.06] bg-navy-800/90 p-0.5">
           <button
diff --git a/apps/arc-web/app/routes/workflow-runs.tsx b/apps/arc-web/app/routes/workflow-runs.tsx
index a3fdb82c8..94873edd1 100644
--- a/apps/arc-web/app/routes/workflow-runs.tsx
+++ b/apps/arc-web/app/routes/workflow-runs.tsx
@@ -17,7 +17,7 @@ function GitPullRequestIcon({ className }: { className?: string }) {
 function RunRow({ run }: { run: RunWithStatus }) {
   const colors = statusColors[run.status];
   return (
-    <Link to={`/runs/${run.id}`} className="grid items-center rounded-lg border border-white/[0.06] bg-navy-800/80 px-4 py-3 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800" style={{ gridColumn: "1 / -1", gridTemplateColumns: "subgrid" }}>
+    <Link to={`/runs/${run.id}`} className="grid items-center rounded-md border border-white/[0.06] bg-navy-800/80 px-4 py-3 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800" style={{ gridColumn: "1 / -1", gridTemplateColumns: "subgrid" }}>
       <span className="flex items-center gap-2 pr-2">
         <span className={`size-2 shrink-0 rounded-full ${colors.dot}`} />
         <span className={`text-xs font-medium ${colors.text}`}>{run.statusLabel}</span>
@@ -78,14 +78,14 @@ export default function WorkflowRuns() {
             placeholder="Search runs..."
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            className="w-full rounded-lg border border-white/[0.06] bg-navy-800/80 py-2 pl-9 pr-3 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
+            className="w-full rounded-md border border-white/[0.06] bg-navy-800/80 py-2 pl-9 pr-3 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
           />
         </div>
         <div className="relative">
           <select
             value={statusFilter}
             onChange={(e) => setStatusFilter(e.target.value as ColumnStatus | "all")}
-            className="appearance-none rounded-lg border border-white/[0.06] bg-navy-800/80 py-2 pl-3 pr-8 text-sm text-ice-100 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
+            className="appearance-none rounded-md border border-white/[0.06] bg-navy-800/80 py-2 pl-3 pr-8 text-sm text-ice-100 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
           >
             <option value="all">All statuses</option>
             {columns.map((col) => (
diff --git a/apps/arc-web/app/routes/workflows.tsx b/apps/arc-web/app/routes/workflows.tsx
index e25441a8a..70403c936 100644
--- a/apps/arc-web/app/routes/workflows.tsx
+++ b/apps/arc-web/app/routes/workflows.tsx
@@ -90,7 +90,7 @@ function EllipsisIcon({ className }: { className?: string }) {
 function WorkflowCard({ workflow }: { workflow: Workflow }) {
   const Icon = workflow.icon;
   return (
-    <div className="group flex items-center gap-4 rounded-lg border border-white/[0.06] bg-navy-800/80 p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800 hover:shadow-lg hover:shadow-black/20">
+    <div className="group flex items-center gap-4 rounded-md border border-white/[0.06] bg-navy-800/80 p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800 hover:shadow-lg hover:shadow-black/20">
       <Link to={`/workflows/${workflow.slug}`} className="flex min-w-0 flex-1 items-center gap-4">
         <div
           className="flex size-9 shrink-0 items-center justify-center rounded-md border bg-navy-900/60"
@@ -144,7 +144,7 @@ export default function Workflows() {
           placeholder="Search workflows..."
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          className="w-full rounded-lg border border-white/[0.06] bg-navy-800/80 py-2 pl-9 pr-3 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
+          className="w-full rounded-md border border-white/[0.06] bg-navy-800/80 py-2 pl-9 pr-3 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
         />
       </div>
       <div className="space-y-3">