Fix directive page styling

1 files changed, 30 insertions, 21 deletions

diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index 645b8d2..06d8ba2 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -176,6 +176,7 @@ function JsonSection({
 
 export function DirectiveDetail({
   directive,
+  onBack,
   onDelete,
   onStart,
   onRefresh,
@@ -245,27 +246,18 @@ export function DirectiveDetail({
     <div className="panel h-full flex flex-col">
       {/* Header */}
       <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
-        <div className="flex items-center gap-2 mb-2">
-          <span
-            className={`font-mono text-[10px] uppercase ${
-              statusColors[directive.status as DirectiveStatus] || "text-[#888]"
-            }`}
+        <div className="flex items-center justify-between mb-3">
+          <button
+            onClick={onBack}
+            className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
           >
-            {directive.status}
-          </span>
-          {isLive && (
-            <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse">
-              polling
-            </span>
-          )}
-          <span className="font-mono text-[10px] text-[#7788aa]">
-            v{directive.version}
-          </span>
-          <div className="ml-auto flex gap-2">
+            &larr; Back to list
+          </button>
+          <div className="flex items-center gap-2">
             {onStart && directive.status === "draft" && (
               <button
                 onClick={() => onStart(directive.id)}
-                className="font-mono text-[10px] text-green-400 hover:text-green-300 transition-colors uppercase"
+                className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
               >
                 Start
               </button>
@@ -273,16 +265,33 @@ export function DirectiveDetail({
             {onDelete && (
               <button
                 onClick={() => onDelete(directive.id)}
-                className="font-mono text-[10px] text-red-400 hover:text-red-300 transition-colors uppercase"
+                className="px-3 py-1.5 font-mono text-xs text-red-400 border border-red-400/30 hover:border-red-400/50 transition-colors uppercase"
               >
                 Delete
               </button>
             )}
           </div>
         </div>
-        <h2 className="font-mono text-sm text-[#dbe7ff]">
-          {directive.title}
-        </h2>
+        <div className="flex items-center gap-3 mb-2">
+          <h2 className="font-mono text-lg text-[#dbe7ff]">
+            {directive.title}
+          </h2>
+          <span
+            className={`font-mono text-xs uppercase ${
+              statusColors[directive.status as DirectiveStatus] || "text-[#888]"
+            }`}
+          >
+            {directive.status}
+          </span>
+          {isLive && (
+            <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse">
+              polling
+            </span>
+          )}
+          <span className="font-mono text-[10px] text-[#7788aa]">
+            v{directive.version}
+          </span>
+        </div>
       </div>
 
       {/* Tabs */}