fix: update design for mobile

Author: mickasmt

components/forms/user-role-form.tsx

@@ -117,14 +117,15 @@ export function UserRoleForm({ user }: UserNameFormProps) {
               )}
             />
           </CardContent>
-          <CardFooter className="flex justify-between border-t bg-accent py-2">
-            <p className="text-sm font-medium text-muted-foreground">
+          <CardFooter className="flex justify-between gap-x-4 border-t bg-accent py-2">
+            <p className="text-balance text-sm font-medium text-muted-foreground">
               Remove this card on real production.
             </p>
             <Button
               type="submit"
-              variant={updated ? "default" : "disable"}
+              className="shrink-0"
               disabled={isPending || !updated}
+              variant={updated ? "default" : "disable"}
             >
               {isPending && (
                 <Icons.spinner className="mr-2 size-4 animate-spin" />

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}