fix(ux): make environment table rows fully clickable
This commit is contained in:
parent
3b873c964b
commit
d97eb11cf1
1 changed files with 5 additions and 3 deletions
|
|
@ -205,14 +205,16 @@ class="environments-table-grid border-b border-neutral-200 bg-neutral-50 px-4 py
|
||||||
|
|
||||||
<template x-for="environment in paginatedEnvironments" :key="environment.uuid">
|
<template x-for="environment in paginatedEnvironments" :key="environment.uuid">
|
||||||
<div
|
<div
|
||||||
class="environments-table-grid group min-h-14 items-center border-b border-neutral-200 px-4 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
|
class="environments-table-grid group relative min-h-14 items-center border-b border-neutral-200 px-4 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
|
||||||
|
<a :href="environment.href" {{ wireNavigate() }} class="absolute inset-0"
|
||||||
|
:aria-label="`Open ${environment.name}`"></a>
|
||||||
<div class="flex min-w-0 items-center gap-3">
|
<div class="flex min-w-0 items-center gap-3">
|
||||||
<div
|
<div
|
||||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
|
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
|
||||||
<x-reicon name="layers" class="size-4" />
|
<x-reicon name="layers" class="size-4" />
|
||||||
</div>
|
</div>
|
||||||
<a :href="environment.href" {{ wireNavigate() }}
|
<a :href="environment.href" {{ wireNavigate() }}
|
||||||
class="truncate text-[13px] font-semibold text-black hover:underline dark:text-fg"
|
class="relative truncate text-[13px] font-semibold text-black hover:underline dark:text-fg"
|
||||||
x-text="environment.name"></a>
|
x-text="environment.name"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -221,7 +223,7 @@ class="truncate text-[13px] font-semibold text-black hover:underline dark:text-f
|
||||||
<p class="environment-description truncate text-[12px] text-neutral-500 dark:text-fg-dim"
|
<p class="environment-description truncate text-[12px] text-neutral-500 dark:text-fg-dim"
|
||||||
x-text="environment.description || '-'"></p>
|
x-text="environment.description || '-'"></p>
|
||||||
|
|
||||||
<div class="flex items-center justify-end gap-0.5">
|
<div class="relative flex items-center justify-end gap-0.5">
|
||||||
<a x-show="environment.addResourceHref" :href="environment.addResourceHref"
|
<a x-show="environment.addResourceHref" :href="environment.addResourceHref"
|
||||||
{{ wireNavigate() }}
|
{{ wireNavigate() }}
|
||||||
class="flex size-7 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
class="flex size-7 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue