fix ScaffoldColumn name spelling

studio/components/layouts/Scaffold.tsx

@@ -47,7 +47,7 @@ const ScaffoldSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
   }
 )
 
-const ScaffoldColoum = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const ScaffoldColumn = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => {
     return (
       <div
@@ -121,7 +121,7 @@ ScaffoldTitle.displayName = 'ScaffoldTitle'
 ScaffoldContainer.displayName = 'ScaffoldContainer'
 ScaffoldDivider.displayName = 'ScaffoldDivider'
 ScaffoldSection.displayName = 'ScaffoldSection'
-ScaffoldColoum.displayName = 'ScaffoldColoum'
+ScaffoldColumn.displayName = 'ScaffoldColumn'
 ScaffoldSectionDetail.displayName = 'ScaffoldSectionDetail'
 ScaffoldSectionContent.displayName = 'ScaffoldSectionContent'
 ScaffoldFilterAndContent.displayName = 'ScaffoldFilterAndContent'
@@ -135,7 +135,7 @@ export {
   ScaffoldContainer,
   ScaffoldDivider,
   ScaffoldSection,
-  ScaffoldColoum,
+  ScaffoldColumn,
   ScaffoldSectionDetail,
   ScaffoldSectionContent,
   ScaffoldFilterAndContent,

studio/pages/integrations/github/install.tsx

@@ -4,12 +4,7 @@ import { useState } from 'react'
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import GitHubIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout'
-import {
-  ScaffoldColoum,
-  ScaffoldContainer,
-  ScaffoldDivider,
-  ScaffoldSectionCol,
-} from 'components/layouts/Scaffold'
+import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import { useGitHubIntegrationCreateMutation } from 'data/integrations/github-integration-create-mutation'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { IntegrationName } from 'data/integrations/integrations.types'
@@ -140,12 +135,12 @@ const GitHubIntegration: NextPageWithLayout = () => {
 
   return (
     <>
-      <main className="overflow-auto flex flex-col h-full">
+      <main className="overflow-auto flex flex-col h-full bg-scale-400">
         <LoadingLine loading={isLoadingGitHubIntegrationCreateMutation} />
         {organizationIntegrationId === null && (
           <>
             <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
-              <ScaffoldColoum className="mx-auto">
+              <ScaffoldColumn className="mx-auto">
                 <h1 className="text-xl text-scale-1200">Choose organization</h1>
                 <>
                   <Markdown content={`Choose the Supabase organization you wish to install in`} />
@@ -170,7 +165,7 @@ const GitHubIntegration: NextPageWithLayout = () => {
                     </Button>
                   </div>
                 </>
-              </ScaffoldColoum>
+              </ScaffoldColumn>
             </ScaffoldContainer>
             <ScaffoldContainer className="flex flex-col gap-6 py-3">
               <Alert

studio/pages/integrations/vercel/install.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import VercelIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout'
-import { ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
+import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { IntegrationName } from 'data/integrations/integrations.types'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
@@ -104,8 +104,6 @@ const VercelIntegration: NextPageWithLayout = () => {
   const { mutate, isLoading: isLoadingVercelIntegrationCreateMutation } =
     useVercelIntegrationCreateMutation({
       onSuccess({ id }) {
-        const orgSlug = selectedOrg?.slug
-
         setOrganizationIntegrationId(id)
 
         handleRouteChange()
@@ -165,35 +163,37 @@ const VercelIntegration: NextPageWithLayout = () => {
 
   return (
     <>
-      <main className="overflow-auto flex flex-col h-full">
+      <main className="overflow-auto flex flex-col h-full bg-scale-400">
         <LoadingLine loading={isLoadingVercelIntegrationCreateMutation} />
         {organizationIntegrationId === null && (
           <>
-            <ScaffoldContainer className="max-w-md flex flex-col gap-6 grow py-8">
-              <h1 className="text-xl text-scale-1200">Choose organization</h1>
-              <>
-                <Markdown content={`Choose the Supabase organization you wish to install in`} />
-                <OrganizationPicker
-                  integrationName="Vercel"
-                  organizationsWithInstalledData={organizationsWithInstalledData}
-                  onSelectedOrgChange={(e) => {
-                    router.query.organizationSlug = e.slug
-                    setSelectedOrg(e)
-                  }}
-                  dataLoading={dataLoading}
-                />
-                <div className="flex flex-row w-full justify-end">
-                  <Button
-                    size="medium"
-                    className="self-end"
-                    disabled={isLoadingVercelIntegrationCreateMutation}
-                    loading={isLoadingVercelIntegrationCreateMutation}
-                    onClick={onInstall}
-                  >
-                    Install integration
-                  </Button>
-                </div>
-              </>
+            <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
+              <ScaffoldColumn className="mx-auto">
+                <h1 className="text-xl text-scale-1200">Choose organization</h1>
+                <>
+                  <Markdown content={`Choose the Supabase organization you wish to install in`} />
+                  <OrganizationPicker
+                    integrationName="Vercel"
+                    organizationsWithInstalledData={organizationsWithInstalledData}
+                    onSelectedOrgChange={(e) => {
+                      router.query.organizationSlug = e.slug
+                      setSelectedOrg(e)
+                    }}
+                    dataLoading={dataLoading}
+                  />
+                  <div className="flex flex-row w-full justify-end">
+                    <Button
+                      size="medium"
+                      className="self-end"
+                      disabled={isLoadingVercelIntegrationCreateMutation}
+                      loading={isLoadingVercelIntegrationCreateMutation}
+                      onClick={onInstall}
+                    >
+                      Install integration
+                    </Button>
+                  </div>
+                </>
+              </ScaffoldColumn>
             </ScaffoldContainer>
             <ScaffoldContainer className="flex flex-col gap-6 py-3">
               <Alert

studio/styles/main.scss

@@ -23,7 +23,7 @@ body,
 .main {
   @apply bg-scale-200;
   @apply text-scale-1200;
-  height: 100%;
+  min-height: 100%;
   padding: 0;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;