fix(studio): legal page buttons (#42149)

* basics

* adjustments

* format

* rabbit

* format

apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx

@@ -15,17 +15,21 @@ interface CustomDocumentProps {
 export const CustomDocument = ({ doc }: CustomDocumentProps) => {
   return (
     <ScaffoldContainer id={doc.id}>
-      <ScaffoldSection>
-        <ScaffoldSectionDetail className="sticky top-12 flex flex-col gap-y-8">
+      <ScaffoldSection className="py-12">
+        <ScaffoldSectionDetail>
           <p className="text-base m-0">{doc.name}</p>
-          <p className="text-sm text-foreground-light m-0">{doc.description}</p>
+          <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
+            <p>{doc.description}</p>
+          </div>
         </ScaffoldSectionDetail>
-        <ScaffoldSectionContent className="flex items-center justify-center h-full">
-          <Button asChild type="default" iconRight={<ExternalLink />}>
-            <a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
-              {doc.action.text}
-            </a>
-          </Button>
+        <ScaffoldSectionContent>
+          <div className="@lg:flex items-center justify-center h-full">
+            <Button asChild type="default" iconRight={<ExternalLink />}>
+              <a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
+                {doc.action.text}
+              </a>
+            </Button>
+          </div>
         </ScaffoldSectionContent>
       </ScaffoldSection>
     </ScaffoldContainer>

apps/studio/components/interfaces/Organization/Documents/DPA.tsx

@@ -37,10 +37,10 @@ export const DPA = () => {
 
   return (
     <>
-      <ScaffoldSection>
-        <ScaffoldSectionDetail className="sticky space-y-6 top-12">
-          <p className="text-base m-0">Data Processing Addendum (DPA)</p>
-          <div className="space-y-2 text-sm text-foreground-light m-0">
+      <ScaffoldSection className="py-12">
+        <ScaffoldSectionDetail>
+          <h4 className="mb-5">Data Processing Addendum (DPA)</h4>
+          <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
             <p>
               All organizations can sign our Data Processing Addendum ("DPA") as part of their GDPR
               compliance.
@@ -62,18 +62,20 @@ export const DPA = () => {
             </p>
           </div>
         </ScaffoldSectionDetail>
-        <ScaffoldSectionContent className="flex items-center justify-center h-full">
-          <Button
-            onClick={() => {
-              setIsOpen(true)
-              sendEvent({
-                action: 'dpa_request_button_clicked',
-              })
-            }}
-            type="default"
-          >
-            Request DPA
-          </Button>
+        <ScaffoldSectionContent>
+          <div className="@lg:flex items-center justify-center h-full">
+            <Button
+              onClick={() => {
+                setIsOpen(true)
+                sendEvent({
+                  action: 'dpa_request_button_clicked',
+                })
+              }}
+              type="default"
+            >
+              Request DPA
+            </Button>
+          </div>
         </ScaffoldSectionContent>
       </ScaffoldSection>
 

apps/studio/components/interfaces/Organization/Documents/Documents.tsx

@@ -1,5 +1,10 @@
 import { SupportLink } from 'components/interfaces/Support/SupportLink'
-import { ScaffoldContainer, ScaffoldDivider, ScaffoldSection } from 'components/layouts/Scaffold'
+import {
+  ScaffoldContainer,
+  ScaffoldDivider,
+  ScaffoldSection,
+  ScaffoldSectionDetail,
+} from 'components/layouts/Scaffold'
 import { InlineLinkClassName } from 'components/ui/InlineLink'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { Fragment } from 'react'
@@ -57,11 +62,13 @@ export const Documents = () => {
       <ScaffoldDivider />
 
       <ScaffoldContainer>
-        <ScaffoldSection>
-          <p className="sticky space-y-6 top-12 text-sm text-foreground-light m-0 whitespace-nowrap">
-            <SupportLink className={InlineLinkClassName}>Submit a support request</SupportLink> if
-            you require additional documents for financial or tax reasons, such as a W-9 form.
-          </p>
+        <ScaffoldSection className="py-12">
+          <ScaffoldSectionDetail className="col-span-full">
+            <p className="text-sm text-foreground-light m-0">
+              <SupportLink className={InlineLinkClassName}>Submit a support request</SupportLink> if
+              you require additional documents for financial or tax reasons, such as a W-9 form.
+            </p>
+          </ScaffoldSectionDetail>
         </ScaffoldSection>
       </ScaffoldContainer>
     </>

apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx

@@ -14,45 +14,43 @@ export const HIPAA = () => {
   const { mutate: sendEvent } = useSendEventMutation()
 
   return (
-    <>
-      <ScaffoldSection>
-        <ScaffoldSectionDetail className="sticky space-y-6 top-12">
-          <p className="text-base m-0">HIPAA</p>
-          <div className="space-y-2 text-sm text-foreground-light m-0">
-            <p>
-              This is only for HIPAA requests. Please ignore this if you already have HIPAA enabled.
-            </p>
-            <p>
-              Organizations on the Team Plan or above are eligible for a paid HIPAA compliance
-              add-on. You can submit a request here and we will get back to you on the pricing and
-              process for your use case.
-            </p>
-            <p>
-              Organizations on the Free or Pro Plan can also submit a request for HIPAA. Note that
-              you are still required to upgrade to the Team Plan after your request is approved.
-            </p>
-          </div>
-        </ScaffoldSectionDetail>
-        <ScaffoldSectionContent>
-          <div className="flex items-center justify-center h-full">
-            <Button asChild type="default" iconRight={<ExternalLink />}>
-              <a
-                href="https://forms.supabase.com/hipaa2"
-                target="_blank"
-                rel="noreferrer noopener"
-                onClick={() =>
-                  sendEvent({
-                    action: 'hipaa_request_button_clicked',
-                    groups: { organization: organization?.slug ?? 'Unknown' },
-                  })
-                }
-              >
-                Request HIPAA
-              </a>
-            </Button>
-          </div>
-        </ScaffoldSectionContent>
-      </ScaffoldSection>
-    </>
+    <ScaffoldSection className="py-12">
+      <ScaffoldSectionDetail>
+        <h4 className="mb-5">HIPAA</h4>
+        <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
+          <p>
+            This is only for HIPAA requests. Please ignore this if you already have HIPAA enabled.
+          </p>
+          <p>
+            Organizations on the Team Plan or above are eligible for a paid HIPAA compliance add-on.
+            You can submit a request here and we will get back to you on the pricing and process for
+            your use case.
+          </p>
+          <p>
+            Organizations on the Free or Pro Plan can also submit a request for HIPAA. Note that you
+            are still required to upgrade to the Team Plan after your request is approved.
+          </p>
+        </div>
+      </ScaffoldSectionDetail>
+      <ScaffoldSectionContent>
+        <div className="@lg:flex items-center justify-center h-full">
+          <Button asChild type="default" iconRight={<ExternalLink />}>
+            <a
+              href="https://forms.supabase.com/hipaa2"
+              target="_blank"
+              rel="noreferrer noopener"
+              onClick={() =>
+                sendEvent({
+                  action: 'hipaa_request_button_clicked',
+                  groups: { organization: organization?.slug ?? 'Unknown' },
+                })
+              }
+            >
+              Request HIPAA
+            </a>
+          </Button>
+        </div>
+      </ScaffoldSectionContent>
+    </ScaffoldSection>
   )
 }

apps/studio/components/interfaces/Organization/Documents/SOC2.tsx

@@ -56,10 +56,10 @@ export const SOC2 = () => {
   }
 
   return (
-    <ScaffoldSection>
-      <ScaffoldSectionDetail className="sticky space-y-6 top-12">
-        <p className="text-base m-0">SOC2 Type 2</p>
-        <div className="space-y-2 text-sm text-foreground-light m-0">
+    <ScaffoldSection className="py-12">
+      <ScaffoldSectionDetail>
+        <h4 className="mb-5">SOC2 Type 2</h4>
+        <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
           <p>
             Organizations on Team Plan or above have access to our most recent SOC2 Type 2 report.
           </p>
@@ -67,19 +67,21 @@ export const SOC2 = () => {
       </ScaffoldSectionDetail>
       <ScaffoldSectionContent>
         {isLoadingPermissions || isLoadingEntitlement ? (
-          <div className="flex items-center justify-center h-full">
+          <div className="@lg:flex items-center justify-center h-full">
             <ShimmeringLoader className="w-24" />
           </div>
         ) : !canReadSubscriptions ? (
           <NoPermission resourceText="access our SOC2 Type 2 report" />
         ) : !hasAccessToSoc2Report ? (
-          <div className="flex items-center justify-center h-full">
-            <Link href={`/org/${slug}/billing?panel=subscriptionPlan&source=soc2`}>
-              <Button type="default">Upgrade to Team</Button>
-            </Link>
+          <div className="@lg:flex items-center justify-center h-full">
+            <Button asChild type="default">
+              <Link href={`/org/${slug}/billing?panel=subscriptionPlan&source=soc2`}>
+                Upgrade to Team
+              </Link>
+            </Button>
           </div>
         ) : (
-          <div className="flex items-center justify-center h-full">
+          <div className="@lg:flex items-center justify-center h-full">
             <Button
               type="default"
               icon={<Download />}

apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx

@@ -54,46 +54,45 @@ export const SecurityQuestionnaire = () => {
   }
 
   return (
-    <>
-      <ScaffoldSection>
-        <ScaffoldSectionDetail className="sticky space-y-6 top-12">
-          <p className="text-base m-0">Standard Security Questionnaire</p>
-          <div className="space-y-2 text-sm text-foreground-light m-0">
-            <p>
-              Organizations on Team Plan or above have access to our standard security
-              questionnaire.
-            </p>
+    <ScaffoldSection className="py-12">
+      <ScaffoldSectionDetail>
+        <h4 className="mb-5">Standard Security Questionnaire</h4>
+        <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
+          <p>
+            Organizations on Team Plan or above have access to our standard security questionnaire.
+          </p>
+        </div>
+      </ScaffoldSectionDetail>
+      <ScaffoldSectionContent>
+        {isLoadingPermissions || isLoadingEntitlement ? (
+          <div className="@lg:flex items-center justify-center h-full">
+            <ShimmeringLoader className="w-24" />
           </div>
-        </ScaffoldSectionDetail>
-        <ScaffoldSectionContent>
-          {isLoadingPermissions || isLoadingEntitlement ? (
-            <div className="flex items-center justify-center h-full">
-              <ShimmeringLoader className="w-24" />
-            </div>
-          ) : !canReadSubscriptions ? (
-            <NoPermission resourceText="access our security questionnaire" />
-          ) : !hasAccessToQuestionnaire ? (
-            <div className="flex items-center justify-center h-full">
+        ) : !canReadSubscriptions ? (
+          <NoPermission resourceText="access our security questionnaire" />
+        ) : !hasAccessToQuestionnaire ? (
+          <div className="@lg:flex items-center justify-center h-full">
+            <Button asChild type="default">
               <Link
                 href={`/org/${slug}/billing?panel=subscriptionPlan&source=securityQuestionnaire`}
               >
-                <Button type="default">Upgrade to Team</Button>
+                Upgrade to Team
               </Link>
-            </div>
-          ) : (
-            <div className="flex items-center justify-center h-full">
-              <Button
-                type="default"
-                icon={<Download />}
-                onClick={handleDownloadClick}
-                disabled={!slug}
-              >
-                Download Questionnaire
-              </Button>
-            </div>
-          )}
-        </ScaffoldSectionContent>
-      </ScaffoldSection>
-    </>
+            </Button>
+          </div>
+        ) : (
+          <div className="@lg:flex items-center justify-center h-full">
+            <Button
+              type="default"
+              icon={<Download />}
+              onClick={handleDownloadClick}
+              disabled={!slug}
+            >
+              Download Questionnaire
+            </Button>
+          </div>
+        )}
+      </ScaffoldSectionContent>
+    </ScaffoldSection>
   )
 }

apps/studio/components/interfaces/Organization/Documents/TIA.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink } from 'lucide-react'
+import { Download } from 'lucide-react'
 
 import {
   ScaffoldSection,
@@ -14,34 +14,36 @@ export const TIA = () => {
   const { mutate: sendEvent } = useSendEventMutation()
 
   return (
-    <ScaffoldSection>
-      <ScaffoldSectionDetail className="sticky space-y-6 top-12">
-        <p className="text-base m-0">Transfer Impact Assessment (TIA)</p>
-        <div className="space-y-2 text-sm text-foreground-light m-0">
+    <ScaffoldSection className="py-12">
+      <ScaffoldSectionDetail>
+        <h4 className="mb-5">Transfer Impact Assessment (TIA)</h4>
+        <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
           <p>
             All organizations can access and use our TIA as part of their GDPR-compliant data
             transfer process.
           </p>
         </div>
       </ScaffoldSectionDetail>
-      <ScaffoldSectionContent className="flex items-center justify-center h-full">
-        <Button asChild type="default" iconRight={<ExternalLink />}>
-          <a
-            href="https://supabase.com/downloads/docs/Supabase+TIA+250314.pdf"
-            target="_blank"
-            rel="noreferrer noopener"
-            download={true}
-            onClick={() =>
-              sendEvent({
-                action: 'document_view_button_clicked',
-                properties: { documentName: 'TIA' },
-                groups: { organization: organization?.slug ?? 'Unknown' },
-              })
-            }
-          >
-            View TIA
-          </a>
-        </Button>
+      <ScaffoldSectionContent>
+        <div className="@lg:flex items-center justify-center h-full">
+          <Button asChild type="default" iconRight={<Download />}>
+            <a
+              href="https://supabase.com/downloads/docs/Supabase+TIA+250314.pdf"
+              target="_blank"
+              rel="noreferrer noopener"
+              download={true}
+              onClick={() =>
+                sendEvent({
+                  action: 'document_view_button_clicked',
+                  properties: { documentName: 'TIA' },
+                  groups: { organization: organization?.slug ?? 'Unknown' },
+                })
+              }
+            >
+              Download TIA
+            </a>
+          </Button>
+        </div>
       </ScaffoldSectionContent>
     </ScaffoldSection>
   )