dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Always show add-condition and delete buttons on touch devices

Browse Source 
Use a pointer-coarse custom variant to bypass hover-dependent
visibility on devices without a precise pointer (phones, tablets).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-11 22:37:04 +01:00
parent 96a7b2d00e
commit 2ce0ff50b9
3 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/combatant-row.tsx
View File

@@ -598,7 +598,7 @@ export function CombatantRow({
icon={<X size={16} />} icon={<X size={16} />}
label="Remove combatant" label="Remove combatant"
onConfirm={() => onRemove(id)} onConfirm={() => onRemove(id)}
className="h-7 w-7 text-muted-foreground opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus:opacity-100 focus:pointer-events-auto transition-opacity" className="h-7 w-7 text-muted-foreground opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus:opacity-100 focus:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:pointer-events-auto transition-opacity"
/> />
</div> </div>
</div> </div>

2
apps/web/src/components/condition-tags.tsx
View File

@@ -89,7 +89,7 @@ export function ConditionTags({
type="button" type="button"
title="Add condition" title="Add condition"
aria-label="Add condition" aria-label="Add condition"
className="inline-flex items-center rounded p-0.5 text-muted-foreground hover:text-hover-neutral hover:bg-hover-neutral-bg transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity" className="inline-flex items-center rounded p-0.5 text-muted-foreground hover:text-hover-neutral hover:bg-hover-neutral-bg transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 pointer-coarse:opacity-100 transition-opacity"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onOpenPicker(); onOpenPicker();

2
apps/web/src/index.css
View File

@@ -80,6 +80,8 @@
} }
} }
@custom-variant pointer-coarse (@media (pointer: coarse));
@utility animate-confirm-pulse { @utility animate-confirm-pulse {
animation: confirm-pulse 300ms ease-out; animation: confirm-pulse 300ms ease-out;
} }