From 5bba54f3e5a3906acfe4e4a1e5ea4c8462a2a473 Mon Sep 17 00:00:00 2001
From: mrhid6 <mrhid6@gmail.com>
Date: Thu, 6 Aug 2026 10:50:31 +0100
Subject: [PATCH] fix: Fixed style layout on workflow run page

---
 web/app/(app)/workflows/[id]/runs/[runId]/page.tsx | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/web/app/(app)/workflows/[id]/runs/[runId]/page.tsx b/web/app/(app)/workflows/[id]/runs/[runId]/page.tsx
index 141994f..a31d3f7 100644
--- a/web/app/(app)/workflows/[id]/runs/[runId]/page.tsx
+++ b/web/app/(app)/workflows/[id]/runs/[runId]/page.tsx
@@ -69,11 +69,7 @@ const pillLed: Record<PillKind, string> = {
 function StatusPill({ status, small }: { status: string; small?: boolean }) {
     const kind = pillKind(status);
     return (
-        <span
-            className={`inline-flex items-center gap-2 rounded-full border font-mono font-semibold uppercase tracking-wide ${
-                small ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-xs"
-            } ${pillClass[kind]}`}
-        >
+        <span className={`inline-flex items-center gap-2 rounded-full border font-mono font-semibold uppercase tracking-wide ${small ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-xs"} ${pillClass[kind]}`}>
             <span className={`h-1.5 w-1.5 rounded-full ${pillLed[kind]}`} />
             {status}
         </span>
@@ -192,10 +188,7 @@ function StepList({ server, now }: { server: ServerRun; now: number }) {
                 {server.steps.map((st) => {
                     const kind = cellKind(st.status);
                     return (
-                        <div
-                            key={st.order}
-                            className={`grid grid-cols-[20px_1fr_auto] items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] hover:bg-surface-2 ${st.status === "running" ? "bg-accent/[0.06]" : ""}`}
-                        >
+                        <div key={st.order} className={`grid grid-cols-[20px_1fr_auto] items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] hover:bg-surface-2 ${st.status === "running" ? "bg-accent/[0.06]" : ""}`}>
                             <span className="text-right font-mono text-[11px] text-text-secondary">{String(st.order + 1).padStart(2, "0")}</span>
                             <span className="flex items-center gap-2 font-medium text-text-primary">
                                 <span className={`font-mono ${cellClass[kind].replace(/bg-\S+/, "")}`}>{cellGlyph[kind]}</span>
@@ -340,7 +333,7 @@ export default function RunDetail() {
     const ago = fmtDuration(now - startMs);
 
     return (
-        <div className="mx-auto max-w-[1180px] p-4 pb-16 sm:p-6 lg:p-8">
+        <div className="p-4 sm:p-6 lg:p-8">
             {/* identity bar */}
             <div className="flex flex-wrap items-start justify-between gap-6">
                 <div>