diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
index 5cb424519f..f26f6db3e2 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
@@ -74,7 +74,7 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
   return (
     <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
       <DialogTrigger>{trigger}</DialogTrigger>
-      <DialogContent className="border-alert">
+      <DialogContent className="border-alert p-4 max-w-md mx-auto">
         <DialogHeader>
           <DialogTitle>Delete Permission</DialogTitle>
           <DialogDescription>
@@ -96,10 +96,11 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
                   <FormLabel className="font-normal text-content-subtle">
                     {" "}
                     Enter the permission's name{" "}
-                    <span className="font-medium text-content">{permission.name}</span> to continue:
+                    <span className="font-medium text-content break-all">{permission.name}</span> to
+                    continue:
                   </FormLabel>
                   <FormControl>
-                    <Input {...field} autoComplete="off" />
+                    <Input {...field} autoComplete="off" className="w-full" />
                   </FormControl>
 
                   <FormMessage />