B4L/buildfor_life_budget
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make entire account card clickable to open detail

Browse Source 
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>
This commit is contained in:
Alexander Grabowski
2026-04-16 14:25:03 +07:00
parent c1a575241f
commit 70bb5954a0
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/companies/[companyId]/accounts/+page.svelte
+13 -11
View File
@@ -715,19 +715,21 @@
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{#each data.accounts as acct (acct.id)} {#each data.accounts as acct (acct.id)}
<div <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' ? '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="flex items-start justify-between gap-2">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<h3 class="truncate text-sm font-semibold text-gray-900 dark:text-white"> <h3 class="truncate text-sm font-semibold text-gray-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">
<a {acct.name}
href={`/companies/${data.company.id}/accounts/${acct.id}`}
class="hover:text-blue-600 dark:hover:text-blue-400"
>
{acct.name}
</a>
</h3> </h3>
<div class="mt-1 flex flex-wrap items-center gap-1.5"> <div class="mt-1 flex flex-wrap items-center gap-1.5">
<span <span
@@ -783,7 +785,7 @@
{/if} {/if}
<div <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 <button
type="button" type="button"
@@ -835,7 +837,7 @@
await update({ reset: false }); await update({ reset: false });
confirmDeleteId = null; 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} /> <input type="hidden" name="id" value={acct.id} />
<p class="mb-2 text-red-700 dark:text-red-300"> <p class="mb-2 text-red-700 dark:text-red-300">
@@ -867,7 +869,7 @@
await update({ reset: false }); await update({ reset: false });
if (result.type === 'success') editingId = null; 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="id" value={acct.id} />
<input type="hidden" name="accountType" value={acct.accountType} /> <input type="hidden" name="accountType" value={acct.accountType} />