fix tabs rendering verticaly bug

src/app/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx

@@ -64,11 +64,14 @@ type ResourceAuthPortalProps = {
     };
     redirect: string;
     queryParamName: string;
+    numMethods: number;
 };
 
 export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
     const router = useRouter();
 
+    const numMethods = props.numMethods;
+
     const [passwordError, setPasswordError] = useState<string | null>(null);
     const [pincodeError, setPincodeError] = useState<string | null>(null);
     const [accessDenied, setAccessDenied] = useState<boolean>(false);
@@ -90,16 +93,6 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
 
     const [activeTab, setActiveTab] = useState(getDefaultSelectedMethod());
 
-    const getColLength = () => {
-        let colLength = 0;
-        if (props.methods.pincode) colLength++;
-        if (props.methods.password) colLength++;
-        if (props.methods.sso) colLength++;
-        return colLength;
-    };
-
-    const [numMethods, setNumMethods] = useState(getColLength());
-
     const pinForm = useForm<z.infer<typeof pinSchema>>({
         resolver: zodResolver(pinSchema),
         defaultValues: {
@@ -125,9 +118,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
         setLoadingLogin(true);
         api.post<AxiosResponse<AuthWithPasswordResponse>>(
             `/resource/${props.resource.id}/auth/pincode`,
-            {
-                pincode: values.pin,
-            },
+            { pincode: values.pin },
         )
             .then((res) => {
                 const session = res.data.data.session;
@@ -202,10 +193,17 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                             <Tabs
                                 value={activeTab}
                                 onValueChange={setActiveTab}
+                                orientation="horizontal"
                             >
                                 {numMethods > 1 && (
                                     <TabsList
-                                        className={`grid w-full grid-cols-${numMethods}`}
+                                        className={`grid w-full ${
+                                            numMethods === 1
+                                                ? "grid-cols-1"
+                                                : numMethods === 2
+                                                  ? "grid-cols-2"
+                                                  : "grid-cols-3"
+                                        }`}
                                     >
                                         {props.methods.pincode && (
                                             <TabsTrigger value="pin">

src/app/auth/resource/[resourceId]/page.tsx

@@ -80,6 +80,14 @@ export default async function ResourceAuthPage(props: {
         );
     }
 
+    const getNumMethods = () => {
+        let colLength = 0;
+        if (authInfo.pincode) colLength++;
+        if (authInfo.password) colLength++;
+        if (authInfo.sso) colLength++;
+        return colLength;
+    };
+
     return (
         <>
             <div className="w-full max-w-md">
@@ -97,6 +105,7 @@ export default async function ResourceAuthPage(props: {
                     queryParamName={
                         process.env.RESOURCE_SESSION_QUERY_PARAM_NAME!
                     }
+                    numMethods={getNumMethods()}
                 />
             </div>
         </>