From a07f2314ed36cfdf7550f71969fa00f7ba4ae2fe Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 3 Apr 2026 01:15:14 +0200
Subject: [PATCH] fix(web): standardize modal button layout across all dialog
 modals

Apply symmetrical full-width button pattern to:
- Delete Identity dialog (ConnectedInstances)
- Transfer Ownership confirmation
- Image Crop modal
---
 packages/web/src/components/modals/ConnectedInstances.tsx   | 6 +++---
 .../web/src/components/modals/TransferOwnershipModal.tsx    | 6 +++---
 packages/web/src/components/ui/ImageCropModal.tsx           | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/modals/ConnectedInstances.tsx b/packages/web/src/components/modals/ConnectedInstances.tsx
index 5cdc98ab..3a4a6c28 100644
--- a/packages/web/src/components/modals/ConnectedInstances.tsx
+++ b/packages/web/src/components/modals/ConnectedInstances.tsx
@@ -516,16 +516,16 @@ function DeleteIdentityDialog({
         </div>
 
         {/* Actions */}
-        <div className="flex justify-end gap-2">
+        <div className="flex gap-3">
           <button
             onClick={onClose}
-            className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
+            className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors"
           >
             Cancel
           </button>
           <button
             onClick={handleConfirm}
-            className="px-3 py-1.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
+            className="flex-1 py-2.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded-lg transition-colors"
           >
             Delete Identity
           </button>
diff --git a/packages/web/src/components/modals/TransferOwnershipModal.tsx b/packages/web/src/components/modals/TransferOwnershipModal.tsx
index 8a3bce83..b99ef082 100644
--- a/packages/web/src/components/modals/TransferOwnershipModal.tsx
+++ b/packages/web/src/components/modals/TransferOwnershipModal.tsx
@@ -94,10 +94,10 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
               </p>
               <p className="text-xs text-txt-tertiary mt-1.5">You will become a regular member.</p>
             </div>
-            <div className="flex gap-2 justify-end">
+            <div className="flex gap-3">
               <button
                 onClick={() => setSelectedUserId(null)}
-                className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
+                className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors disabled:opacity-50"
                 disabled={transferring}
               >
                 Cancel
@@ -105,7 +105,7 @@ export function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string;
               <button
                 onClick={handleTransfer}
                 disabled={transferring}
-                className="px-3 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
+                className="flex-1 py-2.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
               >
                 {transferring ? 'Transferring...' : 'Transfer'}
               </button>
diff --git a/packages/web/src/components/ui/ImageCropModal.tsx b/packages/web/src/components/ui/ImageCropModal.tsx
index e706e7b9..20c225c1 100644
--- a/packages/web/src/components/ui/ImageCropModal.tsx
+++ b/packages/web/src/components/ui/ImageCropModal.tsx
@@ -122,11 +122,11 @@ export function ImageCropModal({
         </div>
 
         {/* Actions */}
-        <div className="flex justify-end gap-2 p-4">
+        <div className="flex gap-3 p-4">
           <button
             type="button"
             onClick={onClose}
-            className="px-4 py-2 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
+            className="flex-1 py-2.5 text-sm font-medium text-txt-secondary bg-interactive-hover hover:bg-interactive-selected rounded-lg transition-colors"
           >
             Cancel
           </button>
@@ -134,7 +134,7 @@ export function ImageCropModal({
             type="button"
             onClick={handleApply}
             disabled={isProcessing || !croppedAreaPixels}
-            className="px-4 py-2 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
+            className="flex-1 py-2.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
           >
             {isProcessing ? 'Applying...' : 'Apply'}
           </button>