layout issues and github check

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -247,9 +247,6 @@ export const CreateBranchModal = () => {
                         </FormControl_Shadcn_>
                         <div className="absolute top-2.5 right-3 flex items-center gap-2">
                           {isChecking && <Loader2 size={14} className="animate-spin" />}
-                          {field.value && !isChecking && !form.formState.errors.gitBranchName && (
-                            <Check size={14} className="text-brand" strokeWidth={2} />
-                          )}
                         </div>
                       </div>
                     </FormItemLayout>

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

@@ -1,4 +1,5 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 import { toast } from 'sonner'
 
@@ -42,6 +43,7 @@ const IntegrationImageHandler = ({ title }: { title: 'vercel' | 'github' }) => {
 }
 
 const IntegrationSettings = () => {
+  const router = useRouter()
   const org = useSelectedOrganization()
 
   const canReadGithubConnection = useCheckPermissions(
@@ -69,8 +71,8 @@ const IntegrationSettings = () => {
   const sidePanelsStateSnapshot = useSidePanelsStateSnapshot()
 
   const onAddGitHubConnection = useCallback(() => {
-    sidePanelsStateSnapshot.setGithubConnectionsOpen(true)
-  }, [sidePanelsStateSnapshot])
+    router.push('/project/_/settings/integrations')
+  }, [router])
 
   const onDeleteGitHubConnection = useCallback(
     async (connection: IntegrationProjectConnection) => {

apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx

@@ -349,7 +349,7 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp
         if (!open) sidePanelStateSnapshot.setGithubConnectionsOpen(false)
       }}
     >
-      <SheetContent side="right" showClose className="flex flex-col gap-0">
+      <SheetContent side="right" size="content" showClose className="flex flex-col gap-0">
         <Form_Shadcn_ {...form}>
           <form
             onSubmit={form.handleSubmit(handleSave)}
@@ -358,7 +358,8 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp
             <SheetHeader className="shrink-0">
               <SheetTitle>Automatic Branching</SheetTitle>
               <SheetDescription>
-                Create a Supabase branch for every GitHub branch and sync them on commit and merge.
+                Create a Supabase branch for every GitHub pull request and sync them on every commit
+                and merge.
               </SheetDescription>
             </SheetHeader>
 

apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/AutomaticBranchingRow.tsx

@@ -73,7 +73,8 @@ export const AutomaticBranchingRow = () => {
         <div className="flex-1">
           <h5 className="text-foreground mb-1 text-sm">Automatic Branching</h5>
           <p className="text-sm text-foreground-light">
-            Create a Supabase branch for every GitHub branch and sync them on commit and merge.
+            Create a Supabase branch for every GitHub pull request and sync them on every commit and
+            merge.
           </p>
         </div>
 

apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx

@@ -1,47 +1,51 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import Image from 'next/image'
 
 import {
   ScaffoldContainer,
-  ScaffoldDescription,
   ScaffoldSection,
-  ScaffoldSectionTitle,
+  ScaffoldSectionContent,
+  ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
-import { cn } from 'ui'
 import { AutomaticBranchingRow } from './AutomaticBranchingRow'
 
+const IntegrationImageHandler = ({ title }: { title: 'vercel' | 'github' }) => {
+  return (
+    <img
+      className="border rounded-lg shadow w-full sm:w-48 mt-6 border-body"
+      src={`${BASE_PATH}/img/integrations/covers/${title}-cover.png`}
+      alt={`${title} cover`}
+    />
+  )
+}
+
 const GitHubSection = () => {
   const canReadGitHubConnection = useCheckPermissions(
     PermissionAction.READ,
     'integrations.github_connections'
   )
 
+  const GitHubTitle = `GitHub Integration`
+
   return (
     <ScaffoldContainer>
-      <ScaffoldSection isFullWidth className="pb-16">
-        <div className="mb-6 flex items-center gap-4">
-          <Image
-            className={cn('dark:invert')}
-            src={`${BASE_PATH}/img/icons/github-icon.svg`}
-            width={30}
-            height={30}
-            alt={`GitHub icon`}
-          />
-          <div>
-            <ScaffoldSectionTitle>GitHub Integration</ScaffoldSectionTitle>
-            <ScaffoldDescription>
-              Connect any of your GitHub repositories to a project.
-            </ScaffoldDescription>
-          </div>
-        </div>
-        {!canReadGitHubConnection ? (
-          <NoPermission resourceText="view this organization's GitHub connections" />
-        ) : (
-          <AutomaticBranchingRow />
-        )}
+      <ScaffoldSection>
+        <ScaffoldSectionDetail title={GitHubTitle}>
+          <p>Connect any of your GitHub repositories to a project.</p>
+          <IntegrationImageHandler title="github" />
+        </ScaffoldSectionDetail>
+        <ScaffoldSectionContent>
+          {!canReadGitHubConnection ? (
+            <NoPermission resourceText="view this organization's GitHub connections" />
+          ) : (
+            <div>
+              <h3 className="mb-4 text-lg">Integration features</h3>
+              <AutomaticBranchingRow />
+            </div>
+          )}
+        </ScaffoldSectionContent>
       </ScaffoldSection>
     </ScaffoldContainer>
   )