fix(ui): show API key row actions on mobile (#1112)

The visibility, copy, and delete buttons in the API Keys list used , which never reveals on touch devices because they don't fire :hover. Switch all three to  — visible by default on mobile, hover-revealed on sm+ — matching the pattern already used in providers/ and media-providers/

Co-authored-by: Muhammad Ridwan Ramadhan <ridwanramadhan8888@gmail.com>
This commit is contained in:
Muhammad Ridwan Ramadhan 2026-05-14 11:06:22 +07:00 committed by GitHub
parent 2190ff062d
commit 581ab7687e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1084,7 +1084,7 @@ export default function APIPageClient({ machineId }) {
</code>
<button
onClick={() => toggleKeyVisibility(key.id)}
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-0 group-hover:opacity-100 transition-all"
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
>
<span className="material-symbols-outlined text-[14px]">
@ -1093,7 +1093,7 @@ export default function APIPageClient({ machineId }) {
</button>
<button
onClick={() => copy(key.key, key.id)}
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-0 group-hover:opacity-100 transition-all"
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
>
<span className="material-symbols-outlined text-[14px]">
{copied === key.id ? "check" : "content_copy"}
@ -1129,7 +1129,7 @@ export default function APIPageClient({ machineId }) {
/>
<button
onClick={() => handleDeleteKey(key.id)}
className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-0 group-hover:opacity-100 transition-all"
className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
>
<span className="material-symbols-outlined text-[18px]">delete</span>
</button>