shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.88k stars 4.18k forks source link

Authentication example not mobile compatible #1855

Closed ayush0402 closed 7 months ago

ayush0402 commented 10 months ago

The authentication example at (https://ui.shadcn.com/examples/authentication) is not mobile compatible, I was trying to use it in my application but realised it is not working properly below the md screen size.

from (https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/authentication/page.tsx)

 <div className="md:hidden">
        <Image
          src="/examples/authentication-light.png"
          width={1280}
          height={843}
          alt="Authentication"
          className="block dark:hidden"
        />
        <Image
          src="/examples/authentication-dark.png"
          width={1280}
          height={843}
          alt="Authentication"
          className="hidden dark:block"
        />
</div>

Only this part of the code seems to be rendering below the md cutoff point and that is just pointing to a screenshot of the authentication page.

ayush0402 commented 10 months ago

I fixed the issue by removing the Image tags and replacing the hidden tailwind classes by grid in the outermost div. (I am using my own custom Form component in this example and this needs to be updated in that regards with the example Form).

my code ```javascript import { Metadata } from "next"; import Link from "next/link"; import LoginForm from "@/components/custom/login/form"; export const metadata: Metadata = { title: "Authentication", description: "Authentication forms built using the components.", }; export default function AuthenticationPage() { return ( <>
Acme Inc

“This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before.”

Sofia Davis

Create an account

Enter your email below to create your account

By clicking continue, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy .

); } ```
shadcn commented 7 months ago

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Max-Kucher commented 6 days ago

Shortly speaking, it is still not mobile compatible.