From 88115d143ef10e2e93b0210766a09804ca134234 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Thu, 2 Jan 2025 13:25:35 +0100
Subject: [PATCH] NORY-47: fix buttons jumping horizontally if tooltip is shown

---
 .../confirmation-dialog-wrapper.tsx           | 21 ++++++++++---------
 .../components/identity/identity-actions.tsx  | 17 +++++++--------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/dashboard/src/components/confirmation-dialog-wrapper.tsx b/dashboard/src/components/confirmation-dialog-wrapper.tsx
index f1d791a..2d40093 100644
--- a/dashboard/src/components/confirmation-dialog-wrapper.tsx
+++ b/dashboard/src/components/confirmation-dialog-wrapper.tsx
@@ -14,18 +14,19 @@ import {
 } from '@/components/ui/alert-dialog';
 import { ReactNode } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import type { VariantProps } from 'class-variance-authority';
 
 interface ButtonWithConfirmDialogProps {
-    buttonProps?: ButtonProps,
-    onCancel?: () => any
-    onSubmit: () => any
-    tooltipContent?: string
-    dialogTitle: string
-    dialogDescription: string
-    dialogButtonCancel?: string
-    dialogButtonSubmit?: string
-    dialogButtonSubmitProps?: typeof buttonVariants
-    children: ReactNode
+    buttonProps?: ButtonProps;
+    onCancel?: () => any;
+    onSubmit: () => any;
+    tooltipContent?: string;
+    dialogTitle: string;
+    dialogDescription: string;
+    dialogButtonCancel?: string;
+    dialogButtonSubmit?: string;
+    dialogButtonSubmitProps?: VariantProps<typeof buttonVariants>;
+    children: ReactNode;
 }
 
 export function ConfirmationDialogWrapper(
diff --git a/dashboard/src/components/identity/identity-actions.tsx b/dashboard/src/components/identity/identity-actions.tsx
index b9bc763..59997cf 100644
--- a/dashboard/src/components/identity/identity-actions.tsx
+++ b/dashboard/src/components/identity/identity-actions.tsx
@@ -25,8 +25,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
     const router = useRouter();
 
     return (
-        <div className="space-x-2">
-
+        <>
             <ConfirmationDialogWrapper
                 onSubmit={async () => {
                     await createRecoveryCode(identity.id)
@@ -41,7 +40,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
                 dialogDescription="Are you sure you want to create a recovery code for this identity?"
                 dialogButtonSubmit="Create code"
             >
-                <Button size="icon">
+                <Button className="mr-2" size="icon">
                     <Key className="h-4"/>
                 </Button>
             </ConfirmationDialogWrapper>
@@ -60,7 +59,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
                 dialogDescription="Are you sure you want to create a recovery link for this identity?"
                 dialogButtonSubmit="Create link"
             >
-                <Button size="icon">
+                <Button className="mr-2" size="icon">
                     <Link className="h-4"/>
                 </Button>
             </ConfirmationDialogWrapper>
@@ -78,7 +77,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
                         dialogDescription="Are you sure you want to deactivate this identity? The user will not be able to sign-in or use any active session until re-activation!"
                         dialogButtonSubmit="Deactivate"
                     >
-                        <Button size="icon">
+                        <Button className="mr-2" size="icon">
                             <UserX className="h-4"/>
                         </Button>
                     </ConfirmationDialogWrapper>
@@ -94,7 +93,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
                         dialogDescription="Are you sure you want to activate this identity?"
                         dialogButtonSubmit="Activate"
                     >
-                        <Button size="icon">
+                        <Button className="mr-2" size="icon">
                             <UserCheck className="h-4"/>
                         </Button>
                     </ConfirmationDialogWrapper>
@@ -112,7 +111,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
                 dialogButtonSubmit="Invalidate sessions"
                 dialogButtonSubmitProps={{ variant: 'destructive' }}
             >
-                <Button size="icon">
+                <Button className="mr-2" size="icon">
                     <UserMinus className="h-4"/>
                 </Button>
             </ConfirmationDialogWrapper>
@@ -132,11 +131,11 @@ export function IdentityActions({ identity }: IdentityActionProps,
                 dialogButtonSubmit="Delete identity"
                 dialogButtonSubmitProps={{ variant: 'destructive' }}
             >
-                <Button size="icon">
+                <Button className="mr-2" size="icon">
                     <Trash className="h-4"/>
                 </Button>
             </ConfirmationDialogWrapper>
 
-        </div>
+        </>
     );
 }
\ No newline at end of file