Merge pull request #895 from supertokens/fix/form-responsive

Fix two column responsive layout

Author: bcbogdan

v3/docs/post-authentication/session-management/session-invalidation/revoke-a-session.mdx

@@ -344,6 +344,7 @@ import { superTokensNextWrapper } from 'supertokens-node/nextjs'
 import { verifySession } from "supertokens-node/recipe/session/framework/express";
 import { SessionRequest } from "supertokens-node/framework/express";
 
+// The following example uses the NextJS Page Router configuration
 // highlight-start
 export default async function someapi(req: SessionRequest, res: any) {
     await superTokensNextWrapper(

v3/src/components/AppInfoForm/AppInfoForm.tsx

@@ -49,7 +49,13 @@ export function AppInfoForm() {
 						configure. To learn more about what each field means check the{" "}
 						<a href="/docs/thirdpartyemailpassword/appinfo">references page</a>.
 					</Text>
-					<Grid columns="repeat(2, 1fr)" gap="4">
+					<Grid
+						columns={{
+							initial: "repeat(1, 1fr)",
+							lg: "repeat(2, 1fr)",
+						}}
+						gap="4"
+					>
 						<Form.Field name="appName" asChild>
 							<Flex gap="1" direction="column">
 								<Form.Label>
@@ -73,7 +79,13 @@ export function AppInfoForm() {
 						</Form.Field>
 					</Grid>
 					<Separator size="4" my="2" />
-					<Grid columns="repeat(2, 1fr)" gap="4">
+					<Grid
+						columns={{
+							initial: "repeat(1, 1fr)",
+							lg: "repeat(2, 1fr)",
+						}}
+						gap="4"
+					>
 						<Form.Field name="apiDomain" asChild>
 							<Flex gap="1" direction="column">
 								<Form.Label>

v3/src/components/Forms/ExampleAppForm.tsx

@@ -67,7 +67,14 @@ function ExampleAppFormRoot() {
 						Update the form based on your tech stack and requirements. Once
 						you're done, copy the command and run it in your terminal.
 					</Text>
-					<Grid columns="repeat(2, 1fr)" mt="2" gap="4">
+					<Grid
+						columns={{
+							initial: "repeat(1, 1fr)",
+							lg: "repeat(2, 1fr)",
+						}}
+						mt="2"
+						gap="4"
+					>
 						<Form.Field name="appName" asChild>
 							<Flex gap="1" direction="column">
 								<Form.Label>
@@ -120,7 +127,13 @@ function ExampleAppFormRoot() {
 							</Flex>
 						</Form.Field>
 					</Grid>
-					<Grid columns="repeat(2, 1fr)" gap="4">
+					<Grid
+						columns={{
+							initial: "repeat(1, 1fr)",
+							lg: "repeat(2, 1fr)",
+						}}
+						gap="4"
+					>
 						<Form.Field name="frontendFramework" asChild>
 							<Flex gap="1" direction="column">
 								<Form.Label>

v3/src/components/SDKCompatibilityTable.tsx

@@ -87,7 +87,14 @@ export function SDKCompatibilityTable() {
 								available versions.
 							</Text>
 							<Separator size="4" mt="3" mb="1" />
-							<Grid columns="repeat(2, 1fr)" gap="4" mt="2">
+							<Grid
+								columns={{
+									initial: "repeat(1, 1fr)",
+									lg: "repeat(2, 1fr)",
+								}}
+								gap="4"
+								mt="2"
+							>
 								<Form.Field name="backend-sdk" asChild>
 									<Flex gap="1" direction="column">
 										<Form.Label>
@@ -150,7 +157,14 @@ export function SDKCompatibilityTable() {
 				</Card>
 			</Box>
 
-			<Grid columns="repeat(2, 1fr)" gap="4" mt="5">
+			<Grid
+				columns={{
+					initial: "repeat(1, 1fr)",
+					lg: "repeat(2, 1fr)",
+				}}
+				gap="4"
+				mt="5"
+			>
 				<Box px="5" py="5" asChild>
 					<Form.Root asChild>
 						<ScrollArea