Improve overall responsiveness on mobile devices (#214)

packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx

@@ -172,7 +172,7 @@ function DeleteTeamConfirmationForm({
         email={user.email}
         onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
         CancelButton={
-          <AlertDialogCancel>
+          <AlertDialogCancel className={'m-0'}>
             <Trans i18nKey={'common:cancel'} />
           </AlertDialogCancel>
         }

packages/ui/src/shadcn/card.tsx

@@ -17,7 +17,7 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  <div className={cn('flex flex-col space-y-1.5 p-4 lg:p-6', className)} {...props} />
 );
 CardHeader.displayName = 'CardHeader';
 
@@ -43,7 +43,7 @@ CardDescription.displayName = 'CardDescription';
 const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={cn('p-6 pt-0', className)} {...props} />;
+}) => <div className={cn('p-4 pt-0 lg:p-6 lg:pt-0', className)} {...props} />;
 CardContent.displayName = 'CardContent';
 
 const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({

packages/ui/src/shadcn/dialog.tsx

@@ -56,7 +56,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
+      'flex flex-col space-y-1.5 text-left',
       className,
     )}
     {...props}