chore: improve styles in OAuth and Magic Links sections (#11942)

nextauthjs · Oct 1, 2024 · e2f3d51 · e2f3d51
1 parent 1afef46
commit e2f3d51
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx b/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx
@@ -56,20 +56,20 @@ export function OAuthProviderSelect() {
             <p className="mt-8 rounded-md">
               Or jump directly to one of the popular ones below.
             </p>
-            <div className="mt-8 flex flex-row gap-6 pb-8">
+            <div className="mt-8 flex flex-row gap-6 overflow-x-scroll pb-8">
               <div
                 role="button"
                 onClick={() =>
                   handleSelectOption({ id: "google", name: "Google" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/google.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Google</div>
               </div>
               <div
                 role="button"
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
                 onClick={() =>
                   handleSelectOption({ id: "github", name: "GitHub" })
                 }
@@ -82,7 +82,7 @@ export function OAuthProviderSelect() {
                 onClick={() =>
                   handleSelectOption({ id: "twitter", name: "Twitter" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/twitter.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Twitter</div>
@@ -92,7 +92,7 @@ export function OAuthProviderSelect() {
                 onClick={() =>
                   handleSelectOption({ id: "keycloak", name: "keycloak" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img
                   src={`/img/providers/keycloak.svg`}
@@ -103,7 +103,7 @@ export function OAuthProviderSelect() {
               <div
                 role="button"
                 onClick={() => handleSelectOption({ id: "okta", name: "okta" })}
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/okta.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Okta</div>

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/docs/pages/getting-started/authentication/email.mdx b/docs/pages/getting-started/authentication/email.mdx
@@ -32,14 +32,14 @@ This login mechanism starts by the user providing their email address at the log
     defaultValue="resend"
     className="w-full flex flex-col"
   >
-    <RichTabs.List className="flex gap-4 flex-wrap">
+    <RichTabs.List className="grid grid-cols-[repeat(auto-fit,140px)] justify-center gap-4">
       <RichTabs.Trigger
         value="forwardemail"
         orientation="vertical"
         className="!border border-neutral-200 dark:border-neutral-700 aria-selected:!bg-neutral-100 aria-selected:dark:!bg-neutral-950 dark:!bg-neutral-900 !bg-white !h-auto !w-auto !gap-2 !justify-start p-6 px-8 rounded-md outline-none transition-all duration-300 hover:bg-neutral-200 !font-normal"
       >
         <img className="size-16 dark:bg-[currentColor]" src={`/img/providers/forwardemail.svg`} />
-        <div className="text-sm text-center">Forward Email</div>
+        <div className="text-sm text-center line-clamp-1">Forward Email</div>
       </RichTabs.Trigger>
       <RichTabs.Trigger
         value="resend"