fix: login page reponsiveness (#22)

* fix: login page responsiveness

* fix: login-redirect on extra small screen

Author: stabldev

src/app/(auth)/login/page.tsx

@@ -16,10 +16,10 @@ export const metadata: Metadata = {
 export default async function Page() {
   return (
     <div className="grid min-h-dvh md:grid-cols-2">
-      <div className="bg-card/50 hidden place-items-center border-r px-6 md:grid lg:px-0">
+      <div className="bg-card/50 hidden place-items-center border-r px-8 md:grid lg:px-0">
         <div className="flex w-full max-w-100 flex-col gap-4">
           <ShieldCheck className="text-muted-foreground size-15 stroke-1" />
-          <h4 className="text-4xl font-black">Your data is yours.</h4>
+          <h4 className="text-3xl font-black lg:text-4xl">Your data is yours.</h4>
           <div className="text-muted-foreground flex gap-2 text-sm">
             <Box className="size-5 shrink-0" />
             <span>Gitloom is decentralized and doesn&apos;t rely on any cetralized database.</span>
@@ -38,44 +38,44 @@ export default async function Page() {
           </div>
         </div>
       </div>
-      <div className="mx-auto flex w-full max-w-75 flex-col items-center justify-center gap-4">
-        <div className="flex items-center gap-4">
+      <div className="grid place-items-center px-4 lg:px-0">
+        <div className="flex w-full max-w-75 flex-col items-center justify-center gap-4">
           <GitloomIcon className="size-7" />
           <GitloomTextIcon className="h-5 w-auto" />
-        </div>
-        <span className="text-muted-foreground text-center text-sm">
-          The Git-native CMS for modern content workflows.
-        </span>
-        <div className="flex w-full flex-col gap-4">
-          <form
-            onSubmit={async () => {
-              'use server';
-              await signIn('github', {
-                redirectTo: '/login/success',
-              });
-            }}
-          >
-            <Button type="submit" size={'default'} className="w-full">
-              <GithubIcon className="size-5" />
-              Sign in with Github
+          <span className="text-muted-foreground text-center text-sm">
+            The Git-native CMS for modern content workflows.
+          </span>
+          <div className="flex w-full flex-col gap-4">
+            <form
+              onSubmit={async () => {
+                'use server';
+                await signIn('github', {
+                  redirectTo: '/login/success',
+                });
+              }}
+            >
+              <Button type="submit" size={'default'} className="w-full">
+                <GithubIcon className="size-5" />
+                Sign in with Github
+              </Button>
+            </form>
+            <Button size={'default'} variant={'secondary'} disabled>
+              <GitlabIcon className="fill-foreground size-5" />
+              Sign in with Gitlab
             </Button>
-          </form>
-          <Button size={'default'} variant={'secondary'} disabled>
-            <GitlabIcon className="fill-foreground size-5" />
-            Sign in with Gitlab
-          </Button>
+          </div>
+          <span className="text-muted-foreground mt-4 text-center text-sm">
+            By signing in, you agree to our <br />
+            <Link href={'/legal/terms-of-service'} className="hover:underline">
+              terms of service
+            </Link>{' '}
+            and{' '}
+            <Link href={'/legal/privacy-policy'} className="hover:underline">
+              privacy policy
+            </Link>
+            .
+          </span>
         </div>
-        <span className="text-muted-foreground mt-4 text-center text-sm">
-          By signing in, you agree to our <br />
-          <Link href={'/legal/terms-of-service'} className="hover:underline">
-            terms of service
-          </Link>{' '}
-          and{' '}
-          <Link href={'/legal/privacy-policy'} className="hover:underline">
-            privacy policy
-          </Link>
-          .
-        </span>
       </div>
     </div>
   );

src/app/(auth)/login/success/login-redirect.tsx

@@ -67,11 +67,11 @@ export default function LoginRedirect() {
           value={value}
           gaugePrimaryColor="var(--color-muted-foreground)"
           gaugeSecondaryColor="var(--color-muted)"
-          className="size-30 stroke-1 [&>span[data-current-value]]:hidden"
+          className="size-20 sm:size-30 [&>span[data-current-value]]:hidden"
         />
-        <GitloomIcon className="absolute size-10" />
+        <GitloomIcon className="absolute size-7 sm:size-10" />
       </div>
-      <div className="relative text-sm [&>span]:whitespace-nowrap">
+      <div className="relative text-xs sm:text-sm [&>span]:whitespace-nowrap">
         {tasks.map((task, idx) => (
           <span
             key={idx}