From 70bb5954a027166918c037234740fc49c968414f Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Thu, 16 Apr 2026 14:25:03 +0700
Subject: [PATCH] Make entire account card clickable to open detail

Stretched-link pattern: absolute-positioned overlay anchor covers the
card; action controls (edit/archive/delete + inline forms) get
`relative z-10` so they float above and stay clickable.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../[companyId]/accounts/+page.svelte         | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/routes/(app)/companies/[companyId]/accounts/+page.svelte b/src/routes/(app)/companies/[companyId]/accounts/+page.svelte
index 80a85a4..51b413c 100644
--- a/src/routes/(app)/companies/[companyId]/accounts/+page.svelte
+++ b/src/routes/(app)/companies/[companyId]/accounts/+page.svelte
@@ -715,19 +715,21 @@
 		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 			{#each data.accounts as acct (acct.id)}
 				<div
-					class="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 {acct.isArchived
+					class="group relative flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:border-blue-400 hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-500 {acct.isArchived
 						? 'opacity-60'
 						: ''}"
 				>
+					<a
+						href={`/companies/${data.company.id}/accounts/${acct.id}`}
+						aria-label={`Open ${acct.name}`}
+						class="absolute inset-0 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+					>
+						<span class="sr-only">Open {acct.name}</span>
+					</a>
 					<div class="flex items-start justify-between gap-2">
 						<div class="min-w-0 flex-1">
-							<h3 class="truncate text-sm font-semibold text-gray-900 dark:text-white">
-								<a
-									href={`/companies/${data.company.id}/accounts/${acct.id}`}
-									class="hover:text-blue-600 dark:hover:text-blue-400"
-								>
-									{acct.name}
-								</a>
+							<h3 class="truncate text-sm font-semibold text-gray-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">
+								{acct.name}
 							</h3>
 							<div class="mt-1 flex flex-wrap items-center gap-1.5">
 								<span
@@ -783,7 +785,7 @@
 					{/if}
 
 					<div
-						class="mt-auto flex flex-wrap justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-700"
+						class="relative z-10 mt-auto flex flex-wrap justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-700"
 					>
 						<button
 							type="button"
@@ -835,7 +837,7 @@
 								await update({ reset: false });
 								confirmDeleteId = null;
 							}}
-							class="mt-2 rounded-md bg-red-50 p-2 text-xs dark:bg-red-900/30"
+							class="relative z-10 mt-2 rounded-md bg-red-50 p-2 text-xs dark:bg-red-900/30"
 						>
 							<input type="hidden" name="id" value={acct.id} />
 							<p class="mb-2 text-red-700 dark:text-red-300">
@@ -867,7 +869,7 @@
 								await update({ reset: false });
 								if (result.type === 'success') editingId = null;
 							}}
-							class="mt-2 rounded-md bg-gray-50 p-3 dark:bg-gray-700/50"
+							class="relative z-10 mt-2 rounded-md bg-gray-50 p-3 dark:bg-gray-700/50"
 						>
 							<input type="hidden" name="id" value={acct.id} />
 							<input type="hidden" name="accountType" value={acct.accountType} />