From fa242b62068f6631ae8754b61c172593a433f136 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Tue, 28 Apr 2026 11:52:27 +0330
Subject: [PATCH] fix(workspaces): improve detail header action responsiveness

---
 src/pages/WorkspaceDetail.tsx | 43 +++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/pages/WorkspaceDetail.tsx b/src/pages/WorkspaceDetail.tsx
index 1008b34..90472b8 100644
--- a/src/pages/WorkspaceDetail.tsx
+++ b/src/pages/WorkspaceDetail.tsx
@@ -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>