Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(workspaces): improve detail header action responsiveness

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 11:52:27 +03:30
parent 7348af28a1
commit fa242b6206
1 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/WorkspaceDetail.tsx
View File

@@ -260,7 +260,7 @@ export default function WorkspaceDetail() {
<section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-8">
<div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
<div className="min-w-0">
<div className="min-w-0 w-full">
<div className="mb-3 flex flex-wrap items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
{workspace.name}
@@ -278,29 +278,32 @@ export default function WorkspaceDetail() {
{canViewReports && (
<button
onClick={() => openWorkspaceRoute('/reports')}
className="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
className="inline-flex w-full h-11 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
>
{t.workspace?.openReports || 'Open reports'}
</button>
)}
{canEdit && (
<button
onClick={() => navigate(`/workspaces/${id}/edit`)}
className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
>
<Edit2 className="h-4 w-4" />
<span>{t.actions?.edit || 'Edit'}</span>
</button>
)}
{canDelete && (
<button
onClick={handleDelete}
className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
>
<Trash2 className="h-4 w-4" />
<span>{t.actions?.delete || 'Delete'}</span>
</button>
)}
<div className="flex w-full items-center gap-2">
{canEdit && (
<button
onClick={() => navigate(`/workspaces/${id}/edit`)}
className="inline-flex w-full h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
>
<Edit2 className="h-4 w-4" />
<span className="lg:hidden">{t.actions?.edit || 'Edit'}</span>
</button>
)}
{canDelete && (
<button
onClick={handleDelete}
className="inline-flex w-full h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
>
<Trash2 className="h-4 w-4" />
<span className="lg:hidden">{t.actions?.delete || 'Delete'}</span>
</button>
)}
</div>
</div>
</div>
</section>