fix: add responsivness

demo/nextjs/app/(auth)/sign-in/page.tsx

@@ -7,10 +7,8 @@ import { Tabs } from "@/components/ui/tabs2";
 export default function Page() {
   return (
     <div className="w-full">
-
+      <div className="flex items-center flex-col justify-center w-full md:py-10">
-      <div className="flex items-center flex-col justify-center w-full py-10">
+        <div className="md:w-[400px]">
-
-        <div className="w-[400px]">
           <Tabs tabs={[{
             title: "Sign In",
             value: "sign-in",

demo/nextjs/app/dashboard/organization-card.tsx

@@ -41,7 +41,7 @@ export function OrganizationCard(props: {
     const currentMember = optimisticOrg?.members.find((member) => member.userId === session?.user.id)
 
     return (
-        <Card>
+        <Card className="rounded-none md:rounded-sm !bg-none border-none">
             <CardHeader>
                 <CardTitle>
                     Organization
@@ -111,9 +111,9 @@ export function OrganizationCard(props: {
                     </div>
                 </div>
             </CardHeader>
-            <CardContent>
+            <CardContent >
 
-                <div className="flex gap-8">
+                <div className="flex gap-8 flex-col md:flex-row">
                     <div className="flex flex-col gap-2 flex-grow">
                         <p className="font-medium border-b-2 border-b-foreground/10">
                             Members
@@ -276,9 +276,6 @@ export function OrganizationCard(props: {
                     </div>
                 </div>
             </CardContent>
-            {/* <CardFooter className="flex justify-between">
-
-            </CardFooter> */}
         </Card>
     )
 }
@@ -328,7 +325,7 @@ function CreateOrganizationDialog() {
                     </p>
                 </Button>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>
                         New Organization
@@ -374,7 +371,7 @@ function CreateOrganizationDialog() {
                     </div>
                 </div>
                 <DialogFooter>
-                    <Button onClick={async () => {
+                    <Button disabled={loading} onClick={async () => {
                         setLoading(true);
                         await organization.create({
                             name: name,
@@ -418,7 +415,7 @@ function InviteMemberDialog({ setOptimisticOrg, optimisticOrg }: { setOptimistic
                     </p>
                 </Button>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>
                         Invite Member

demo/nextjs/app/dashboard/user-card.tsx

@@ -63,11 +63,11 @@ export default function UserCard(props: {
     const [isSignOut, setIsSignOut] = useState<boolean>(false);
 
     return (
-        <Card>
+        <Card className="rounded-none md:rounded-sm">
             <CardHeader>
                 <CardTitle>User</CardTitle>
             </CardHeader>
-            <CardContent className="grid gap-8">
+            <CardContent className="grid gap-8 grid-cols-1">
                 <div className="flex items-start justify-between">
                     <div className="flex items-center gap-4">
                         <Avatar className="hidden h-9 w-9 sm:flex ">
@@ -121,12 +121,12 @@ export default function UserCard(props: {
                         })
                     }
                 </div>
-                <div className="border-y py-4 flex items-center justify-between gap-2">
+                <div className="border-y py-4 flex items-center flex-wrap justify-between gap-2">
                     <div className="flex flex-col gap-2">
                         <p className="text-sm">
                             Passkeys
                         </p>
-                        <div className="flex gap-2">
+                        <div className="flex gap-2 flex-wrap">
                             <AddPasskey />
                             <ListPasskeys />
                         </div>
@@ -142,12 +142,12 @@ export default function UserCard(props: {
                                         <DialogTrigger asChild>
                                             <Button variant="outline" className="gap-2">
                                                 <QrCode size={16} />
-                                                <span className="text-sm">
+                                                <span className="md:text-sm text-xs">
                                                     Scan QR Code
                                                 </span>
                                             </Button>
                                         </DialogTrigger>
-                                        <DialogContent>
+                                        <DialogContent className="sm:max-w-[425px] w-11/12">
                                             <DialogHeader>
                                                 <DialogTitle>
                                                     Scan QR Code
@@ -180,14 +180,14 @@ export default function UserCard(props: {
                                         {
                                             session?.user.twoFactorEnabled ? <ShieldOff size={16} /> : <ShieldCheck size={16} />
                                         }
-                                        <span className="text-sm">
+                                        <span className="md:text-sm text-xs">
                                             {
                                                 session?.user.twoFactorEnabled ? "Disable 2FA" : "Enable 2FA"
                                             }
                                         </span>
                                     </Button>
                                 </DialogTrigger>
-                                <DialogContent>
+                                <DialogContent className="sm:max-w-[425px] w-11/12">
                                     <DialogHeader>
                                         <DialogTitle>
                                             {
@@ -323,7 +323,7 @@ function ChangePassword() {
                     </span>
                 </Button>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>
                         Change Password
@@ -420,7 +420,7 @@ function EditUserDialog(props: { session: Session | null }) {
                     Edit User
                 </Button>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>
                         Edit User
@@ -526,12 +526,12 @@ function AddPasskey() {
     return (
         <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
-                <Button variant="outline" className="gap-2">
+                <Button variant="outline" className="gap-2 text-xs md:text-sm">
                     <Plus size={15} />
                     Add New Passkey
                 </Button>
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[425px]">
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>Add New Passkey</DialogTitle>
                     <DialogDescription>
@@ -584,14 +584,14 @@ function ListPasskeys() {
     return (
         <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
-                <Button variant="outline">
+                <Button variant="outline" className="gap-2 text-xs md:text-sm">
                     <Fingerprint className="mr-2 h-4 w-4" />
                     Passkeys {
                         data?.length ? `[${data?.length}]` : ""
                     }
                 </Button>
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[425px]">
+            <DialogContent className="sm:max-w-[425px] w-11/12">
                 <DialogHeader>
                     <DialogTitle>Passkeys</DialogTitle>
                     <DialogDescription>

demo/nextjs/app/page.tsx

@@ -7,22 +7,22 @@ export default async function Home() {
     "Email & Password", "Organization | Teams", "Passkeys", "TwoFactor", "Multi Factor", "Password Reset", "Session Management"
   ]
   return (
-    <div className="min-h-[80vh] flex items-center justify-center">
+    <div className="min-h-[80vh] flex items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
       <main className="flex flex-col gap-4 row-start-2 items-center justify-center">
         <div className="flex flex-col gap-1">
           <h3 className="font-bold text-4xl text-black dark:text-white text-center">
             Better Auth.
           </h3>
-          <p className="text-center break-words">
+          <p className="text-center break-words text-sm md:text-base">
             Official demo to showcase <a href="https://better-auth.com" target="_blank" className="italic underline">better-auth.</a> features and capabilities. <br />
           </p>
         </div>
         <div className="md:w-10/12 w-full flex flex-col gap-4">
           <div className="flex flex-col gap-3 pt-2 flex-wrap">
             <div className="border-y py-2 border-dotted bg-secondary/60 opacity-80">
-              <div className="text-xs flex items-center gap-2 justify-center text-muted-foreground italic">
+              <div className="text-xs flex items-center gap-2 justify-center text-muted-foreground ">
                 <span className="text-center">
-                  * All features on this demo are Implemented with better auth without any custom backend code
+                  All features on this demo are Implemented with better auth without any custom backend code
                 </span>
               </div>
             </div>

demo/nextjs/components/sign-in.tsx

@@ -30,8 +30,8 @@ export default function SignIn() {
   return (
     <Card className="z-50 rounded-md rounded-t-none max-w-md">
       <CardHeader>
-        <CardTitle className="text-xl">Sign In</CardTitle>
+        <CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
-        <CardDescription>
+        <CardDescription className="text-xs md:text-sm">
           Enter your email below to login to your account
         </CardDescription>
       </CardHeader>

demo/nextjs/components/sign-up.tsx

@@ -45,8 +45,8 @@ export function SignUp() {
   return (
     <Card className="z-50 rounded-md rounded-t-none max-w-md">
       <CardHeader>
-        <CardTitle className="text-xl">Sign Up</CardTitle>
+        <CardTitle className="text-lg md:text-xl">Sign Up</CardTitle>
-        <CardDescription>
+        <CardDescription className="text-xs md:text-sm">
           Enter your information to create an account
         </CardDescription>
       </CardHeader>

demo/nextjs/components/wrapper.tsx

@@ -11,8 +11,8 @@ import {
 export function Wrapper(props: { children: React.ReactNode }) {
     return (
         <div className="min-h-screen w-full dark:bg-black bg-white  dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
-            <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+            <div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
-            <div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-10/12 lg:w-8/12 px-4 md:px-1">
+            <div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
                 <Link href="/">
                     <div className="flex gap-2 cursor-pointer">
                         <Logo />
@@ -23,7 +23,7 @@ export function Wrapper(props: { children: React.ReactNode }) {
                     <ThemeToggle />
                 </div>
             </div>
-            <div className="mt-20 lg:w-7/12 w-9/12">
+            <div className="mt-20 lg:w-7/12 w-full">
                 {props.children}
             </div>
         </div>

docs/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg w-11/12",
 				className,
 			)}
 			{...props}