markus/next-ory
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-04-10 11:58:41 +00:00
Code Releases Packages Activity

NORY-47: fix buttons jumping horizontally if tooltip is shown

Browse source
This commit is contained in:
Markus Thielker 2025-01-02 13:25:35 +01:00
parent e6b9095454
commit 88115d143e
No known key found for this signature in database
2 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
dashboard/src/components/confirmation-dialog-wrapper.tsx
View file

@ -14,18 +14,19 @@ import {
} from '@/components/ui/alert-dialog'; } from '@/components/ui/alert-dialog';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import type { VariantProps } from 'class-variance-authority';
interface ButtonWithConfirmDialogProps { interface ButtonWithConfirmDialogProps {
buttonProps?: ButtonProps, buttonProps?: ButtonProps;
onCancel?: () => any onCancel?: () => any;
onSubmit: () => any onSubmit: () => any;
tooltipContent?: string tooltipContent?: string;
dialogTitle: string dialogTitle: string;
dialogDescription: string dialogDescription: string;
dialogButtonCancel?: string dialogButtonCancel?: string;
dialogButtonSubmit?: string dialogButtonSubmit?: string;
dialogButtonSubmitProps?: typeof buttonVariants dialogButtonSubmitProps?: VariantProps<typeof buttonVariants>;
children: ReactNode children: ReactNode;
} }
export function ConfirmationDialogWrapper( export function ConfirmationDialogWrapper(

17
dashboard/src/components/identity/identity-actions.tsx
View file

@ -25,8 +25,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
const router = useRouter(); const router = useRouter();
return ( return (
<div className="space-x-2"> <>
<ConfirmationDialogWrapper <ConfirmationDialogWrapper
onSubmit={async () => { onSubmit={async () => {
await createRecoveryCode(identity.id) 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?" dialogDescription="Are you sure you want to create a recovery code for this identity?"
dialogButtonSubmit="Create code" dialogButtonSubmit="Create code"
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<Key className="h-4"/> <Key className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </ConfirmationDialogWrapper>
@ -60,7 +59,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
dialogDescription="Are you sure you want to create a recovery link for this identity?" dialogDescription="Are you sure you want to create a recovery link for this identity?"
dialogButtonSubmit="Create link" dialogButtonSubmit="Create link"
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<Link className="h-4"/> <Link className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </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!" 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" dialogButtonSubmit="Deactivate"
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<UserX className="h-4"/> <UserX className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </ConfirmationDialogWrapper>
@ -94,7 +93,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
dialogDescription="Are you sure you want to activate this identity?" dialogDescription="Are you sure you want to activate this identity?"
dialogButtonSubmit="Activate" dialogButtonSubmit="Activate"
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<UserCheck className="h-4"/> <UserCheck className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </ConfirmationDialogWrapper>
@ -112,7 +111,7 @@ export function IdentityActions({ identity }: IdentityActionProps,
dialogButtonSubmit="Invalidate sessions" dialogButtonSubmit="Invalidate sessions"
dialogButtonSubmitProps={{ variant: 'destructive' }} dialogButtonSubmitProps={{ variant: 'destructive' }}
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<UserMinus className="h-4"/> <UserMinus className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </ConfirmationDialogWrapper>
@ -132,11 +131,11 @@ export function IdentityActions({ identity }: IdentityActionProps,
dialogButtonSubmit="Delete identity" dialogButtonSubmit="Delete identity"
dialogButtonSubmitProps={{ variant: 'destructive' }} dialogButtonSubmitProps={{ variant: 'destructive' }}
> >
<Button size="icon"> <Button className="mr-2" size="icon">
<Trash className="h-4"/> <Trash className="h-4"/>
</Button> </Button>
</ConfirmationDialogWrapper> </ConfirmationDialogWrapper>
</div> </>
); );
} }