From e1a4692a432598124df9c00bf9a739cebc85d2d2 Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Tue, 30 Jun 2026 23:07:57 -0700
Subject: [PATCH] Make service/job/program cards fully clickable

Use the stretched-link pattern: the card is relative and the title link
gets an after:absolute after:inset-0 overlay so clicking anywhere on the
card navigates to the detail page. Interactive controls (action buttons,
subdomain/Docs links, ProgramActions) are raised with relative z-10 so they
stay independently clickable. Cards also get a hover border for affordance.
---
 app/src/components/JobCard.tsx     |  6 +++---
 app/src/components/ProgramCard.tsx | 22 ++++++++++++----------
 app/src/components/ServiceCard.tsx | 10 +++++-----
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/src/components/JobCard.tsx b/app/src/components/JobCard.tsx
index ee67cd4..7bb8460 100644
--- a/app/src/components/JobCard.tsx
+++ b/app/src/components/JobCard.tsx
@@ -19,11 +19,11 @@ export function JobCard({ job, health }: JobCardProps) {
   }
 
   return (
-    <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
+    <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
       <div className="flex items-start justify-between mb-2">
         <Link
           to={`/jobs/${job.id}`}
-          className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
+          className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
         >
           {job.id}
         </Link>
@@ -59,7 +59,7 @@ export function JobCard({ job, health }: JobCardProps) {
         </div>
 
         {job.managed && (
-          <div className="flex items-center gap-1">
+          <div className="relative z-10 flex items-center gap-1">
             {isDown && (
               <button
                 onClick={() => doAction("start")}
diff --git a/app/src/components/ProgramCard.tsx b/app/src/components/ProgramCard.tsx
index 8ca64cf..b539d27 100644
--- a/app/src/components/ProgramCard.tsx
+++ b/app/src/components/ProgramCard.tsx
@@ -10,11 +10,11 @@ interface ProgramCardProps {
 
 export function ProgramCard({ program }: ProgramCardProps) {
   return (
-    <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
+    <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
       <div className="flex items-start justify-between mb-2">
         <Link
           to={`/programs/${program.id}`}
-          className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
+          className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
         >
           {program.id}
         </Link>
@@ -29,14 +29,16 @@ export function ProgramCard({ program }: ProgramCardProps) {
         <p className="text-sm text-[var(--muted)] mb-3">{program.description}</p>
       )}
 
-      <ProgramActions
-        name={program.id}
-        actions={program.actions}
-        active={program.active}
-        behavior={program.behavior}
-        deployedAs={[...program.services, ...program.jobs]}
-        compact
-      />
+      <div className="relative z-10">
+        <ProgramActions
+          name={program.id}
+          actions={program.actions}
+          active={program.active}
+          behavior={program.behavior}
+          deployedAs={[...program.services, ...program.jobs]}
+          compact
+        />
+      </div>
     </div>
   )
 }
diff --git a/app/src/components/ServiceCard.tsx b/app/src/components/ServiceCard.tsx
index 7754cd3..4cd2c68 100644
--- a/app/src/components/ServiceCard.tsx
+++ b/app/src/components/ServiceCard.tsx
@@ -22,11 +22,11 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
   const isDown = health?.status === "down"
 
   return (
-    <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
+    <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
       <div className="flex items-start justify-between mb-2">
         <Link
           to={`/services/${service.id}`}
-          className="text-base font-semibold hover:text-[var(--primary)] transition-colors"
+          className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
         >
           {service.id}
         </Link>
@@ -61,7 +61,7 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
           {service.subdomain && (
             <a
               href={subdomainUrl(service.subdomain) ?? undefined}
-              className="flex items-center gap-1 text-[var(--primary)] hover:underline"
+              className="relative z-10 flex items-center gap-1 text-[var(--primary)] hover:underline"
             >
               <ExternalLink size={12} />
               {service.subdomain}
@@ -70,7 +70,7 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
           {service.port && (
             <a
               href={`http://localhost:${service.port}/docs`}
-              className="text-[var(--primary)] hover:underline"
+              className="relative z-10 text-[var(--primary)] hover:underline"
             >
               Docs
             </a>
@@ -78,7 +78,7 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
         </div>
 
         {service.managed && (
-          <div className="flex items-center gap-1">
+          <div className="relative z-10 flex items-center gap-1">
             {isDown && (
               <button
                 onClick={() => doAction("start")}