Merge pull request #886 from supertokens/fix/responsive

Fix reference card grid responsive behavior
supertokens · Jan 4, 2025 · f232507 · f232507
2 parents 1ce24f8 + 2f4e65d
commit f232507
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 11 deletions.
diff --git a/v3/docs/authentication/overview.mdx b/v3/docs/authentication/overview.mdx
@@ -32,7 +32,7 @@ Discover all the ways in which you can authenticate your users with **SuperToken
       Authentication through magic links or one-time codes.
     </ReferenceCard.Description>
   </ReferenceCard>
-  <div />
+<ReferenceCard.GridHelper />
   <ReferenceCard href="/docs/authentication/social/introduction">
     <ReferenceCard.Title>
       Social Login
@@ -49,7 +49,7 @@ Discover all the ways in which you can authenticate your users with **SuperToken
       Instructions on how to configure your application to support multiple tenants and enterprise authentication methods.
     </ReferenceCard.Description>
   </ReferenceCard>
-  <div />
+<ReferenceCard.GridHelper />
   <ReferenceCard href="/docs/authentication/unified-login/introduction">
     <ReferenceCard.Title>
       Unified Login
@@ -90,7 +90,7 @@ For information on other features exposed by SuperTokens, please refer to the fo
           Use SuperTokens to manage multiple organizations and apps.
     </ReferenceCard.Description>
 			</ReferenceCard>
-<div/>
+<ReferenceCard.GridHelper />
 			<ReferenceCard href="/docs/additional-verification/attack-protection-suite/introduction">
     <ReferenceCard.Title>
           Attack Protection Suite
@@ -107,7 +107,7 @@ For information on other features exposed by SuperTokens, please refer to the fo
           Deploy SuperTokens in your own infrastructure.
     </ReferenceCard.Description>
 			</ReferenceCard>
-<div/>
+<ReferenceCard.GridHelper />
 			<ReferenceCard href="/docs/migration/about">
     <ReferenceCard.Title>
           Migration Guide

diff --git a/v3/docs/index.mdx b/v3/docs/index.mdx
@@ -67,7 +67,7 @@ import { DescriptionText } from "/src/components/DescriptionText";
           Set up additional verification layers in you sign in process.
     </ReferenceCard.Description>
   </ReferenceCard>
-<div/>
+<ReferenceCard.GridHelper />
 
 			<ReferenceCard href="/docs/multi-tenancy/introduction">
     <ReferenceCard.Title>
@@ -88,7 +88,7 @@ import { DescriptionText } from "/src/components/DescriptionText";
     </ReferenceCard.Description>
 			</ReferenceCard>
 
-<div/>
+<ReferenceCard.GridHelper />
 
 
 			<ReferenceCard href="/docs/deployment/self-hosting/with-docker">

diff --git a/v3/docs/references/index.mdx b/v3/docs/references/index.mdx
@@ -34,7 +34,7 @@ Read through detailed information on various enetities that you will encounter w
         The schema used to represent users in **SuperTokens**. 
     </ReferenceCard.Description>
 			</ReferenceCard>
-<div />
+<ReferenceCard.GridHelper />
 
   <ReferenceCard href="/docs/references/sdks/overview">
     <ReferenceCard.Title>
@@ -80,7 +80,7 @@ See how you can fine-tune your authentication flow by using specific SDK feature
     <ReferenceCard.Description>
     </ReferenceCard.Description>
   </ReferenceCard>
-<div />
+<ReferenceCard.GridHelper />
 
   <ReferenceCard href="/docs/references/sdks/apis-overrides/about">
     <ReferenceCard.Title>

diff --git a/v3/docs/references/user-interface/overview.mdx b/v3/docs/references/user-interface/overview.mdx
@@ -38,7 +38,7 @@ You will find specific instructions on how to create your UI elements of the mai
         How to add your custom styles to the pre-built UI elements.
     </ReferenceCard.Description>
 			</ReferenceCard>
-<div />
+<ReferenceCard.GridHelper />
 
   <ReferenceCard href="/docs/references/user-interface/react-component-override/about">
     <ReferenceCard.Title>
@@ -81,7 +81,7 @@ You will find specific instructions on how to create your UI elements of the mai
         Showcases all the components used in the passwordless authentication flow.
     </ReferenceCard.Description>
 			</ReferenceCard>
-    <div />
+<ReferenceCard.GridHelper />
 
   <ReferenceCard href="/docs/references/user-interface/ui-showcase/thirdparty-login">
     <ReferenceCard.Title>

diff --git a/v3/src/components/Cards/ReferenceCard/ReferenceCard.tsx b/v3/src/components/Cards/ReferenceCard/ReferenceCard.tsx
@@ -80,15 +80,32 @@ function ReferenceCardDescription({ children }: React.PropsWithChildren<{}>) {
 
 function ReferenceCardGrid({ children }: React.PropsWithChildren<{}>) {
 	return (
-		<Grid columns="repeat(3, 1fr)" gap="4">
+		<Grid
+			columns={{
+				initial: "repeat(1, 1fr)",
+				lg: "repeat(3, 1fr)",
+				xs: "repeat(2, 1fr)",
+			}}
+			gap="4"
+		>
 			{children}
 		</Grid>
 	);
 }
 
+// In some cases we want to show a grid that has only two columns
+// but in which children stretch over a 1/3 of the width of the grid
+// It might be skill issue but I can't figure out anything other than this hacky solution.
+// We use an additional empty div to ensure the width size.
+// That div needs to work in responsive scenarios (dissapear when the grid changes to two columns)
+function ReferenceCardGridHelper() {
+	return <div className="reference-card__grid-helper" />;
+}
+
 export const ReferenceCard = Object.assign(ReferenceCardRoot, {
 	Avatar: ReferenceCardAvatar,
 	Title: ReferenceCardTitle,
 	Description: ReferenceCardDescription,
 	Grid: ReferenceCardGrid,
+	GridHelper: ReferenceCardGridHelper,
 });
diff --git a/v3/src/components/Cards/ReferenceCard/styles.scss b/v3/src/components/Cards/ReferenceCard/styles.scss
@@ -32,4 +32,10 @@
 	p {
 		margin: 0;
 	}
+
+	&__grid-helper {
+		@media (max-width: 1280px) {
+			display: none;
+		}
+	}
 }