[pull] master from supabase:master

apps/design-system/content/docs/components/switch.mdx

@@ -1,6 +1,6 @@
 ---
 title: Switch
-description: A control that allows the user to toggle between checked and not checked.
+description: A control for toggling between unchecked and checked.
 component: true
 links:
   doc: https://www.radix-ui.com/docs/primitives/components/switch
@@ -60,6 +60,26 @@ import { Switch } from '@/components/ui/switch'
 <Switch />
 ```
 
+### Relative positioning
+
+When using Switch in custom flex layouts (especially with height constraints like `h-full`), you may need to add `relative` positioning to the parent container to ensure proper rendering of focus rings, form validation messages, and overflow.
+
+```tsx
+<div className="relative">
+  <FormField_Shadcn_
+    control={form.control}
+    name="enabled"
+    render={({ field }) => (
+      <FormControl_Shadcn_>
+        <Switch checked={field.value} onCheckedChange={field.onChange} />
+      </FormControl_Shadcn_>
+    )}
+  />
+</div>
+```
+
+You don’t need to add `relative` manually when using FormItemLayout as it provides the necessary positioning context automatically.
+
 ## Examples
 
 ### Form

apps/docs/content/_partials/social_provider_setup.mdx

@@ -2,7 +2,7 @@ The next step requires a callback URL, which looks like this: `https://<project-
 
 - Go to your [Supabase Project Dashboard](/dashboard)
 - Click on the `Authentication` icon in the left sidebar
-- Click on [`Providers`](/dashboard/project/_/auth/providers) under the Configuration section
+- Click on [`Sign In / Providers`](/dashboard/project/_/auth/providers) under the Configuration section
 - Click on **{{ .provider }}** from the accordion list to expand and you'll find your **Callback URL**, you can click `Copy` to copy it to the clipboard
 
 <Admonition type="note">

apps/docs/content/guides/auth/social-login/auth-github.mdx

@@ -10,7 +10,7 @@ To enable GitHub Auth for your project, you need to set up a GitHub OAuth applic
 
 Setting up GitHub logins for your application consists of 3 parts:
 
-- Create and configure a GitHub OAuth App on [GitHub](https://github.com)
+- Create and configure a GitHub OAuth App on [GitHub](https://github.com/settings/applications/new)
 - Add your GitHub OAuth keys to your [Supabase Project](/dashboard)
 - Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
 

apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx

@@ -120,14 +120,14 @@ export const EmailTemplates = () => {
         </div>
       )}
       {isSuccess && (
-        <div className="my-12">
+        <>
           {builtInSMTP ? (
-            <div className="mb-12">
+            <div className="mt-12">
               <EmailRateLimitsAlert />
             </div>
           ) : null}
           {isSecurityNotificationsEnabled ? (
-            <div className="space-y-12">
+            <div className="mt-12 space-y-12">
               <div>
                 <ScaffoldSectionTitle className="mb-4">Authentication</ScaffoldSectionTitle>
                 <Card>
@@ -149,11 +149,8 @@ export const EmailTemplates = () => {
                             )}
                           </div>
 
-                          <div className="flex items-center gap-4 group">
-                            <ChevronRight
-                              size={16}
-                              className="text-foreground-muted group-hover:text-foreground transition-colors"
-                            />
+                          <div className="flex items-center gap-4">
+                            <ChevronRight size={16} className="text-foreground-muted" />
                           </div>
                         </Link>
                       </CardContent>
@@ -191,7 +188,7 @@ export const EmailTemplates = () => {
                               )}
                             </Link>
 
-                            <div className="flex items-center gap-4 group h-full pl-2">
+                            <div className="flex items-center gap-4 h-full pl-2 relative">
                               <FormField_Shadcn_
                                 control={notificationsForm.control}
                                 name={templateEnabledKey}
@@ -210,10 +207,7 @@ export const EmailTemplates = () => {
                                 href={`/project/${projectRef}/auth/templates/${templateSlug}`}
                                 className="py-6 pr-6"
                               >
-                                <ChevronRight
-                                  size={16}
-                                  className="text-foreground-muted hover:text-foreground transition-colors"
-                                />
+                                <ChevronRight size={16} className="text-foreground-muted" />
                               </Link>
                             </div>
                           </CardContent>
@@ -271,7 +265,7 @@ export const EmailTemplates = () => {
               </Tabs_Shadcn_>
             </Card>
           )}
-        </div>
+        </>
       )}
     </ScaffoldSection>
   )

apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx

@@ -1,66 +1,66 @@
-import { Check, MailWarning } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
 
 import { Markdown } from 'components/interfaces/Markdown'
 import { ValidateSpamResponse } from 'data/auth/validate-spam-mutation'
-import { Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 interface SpamValidationProps {
-  validationResult?: ValidateSpamResponse
+  spamRules?: ValidateSpamResponse['rules']
 }
 
 // [Joshen] According to API, we label as a spam risk as long as there are spam
 // rules identified with scores above 0. Scores are irrelevant in our context and
 // are hence not visualized in the UI
 
-export const SpamValidation = ({ validationResult }: SpamValidationProps) => {
-  const spamRules = (validationResult?.rules ?? []).filter((rule) => rule.score >= 0)
-  const hasSpamWarning = spamRules.length > 0
+export const SpamValidation = ({ spamRules = [] }: SpamValidationProps) => {
+  const rules = spamRules.filter((rule) => rule.score >= 0)
 
   return (
-    <div className="flex items-start gap-2">
-      <div className="mt-0.5">
-        {hasSpamWarning ? (
-          <MailWarning size={16} strokeWidth={1.5} className="text-warning" />
-        ) : (
-          <Check size={16} strokeWidth={1.5} className="text-brand" />
-        )}
-      </div>
-      <div className="flex flex-col gap-2">
-        <h5>
-          {hasSpamWarning
-            ? 'Email has a high probability of being marked as spam - review issues below to improve deliverability.'
-            : 'Email content is unlikely to be marked as spam'}
-        </h5>
-        {hasSpamWarning && (
-          <>
-            <div className="flex flex-col gap-y-3">
-              <Table>
-                <TableHeader className="font-mono uppercase text-xs [&_th]:h-auto [&_th]:py-2">
-                  <TableRow className="hover:bg-transparent">
-                    <TableHead className="pl-0">Warning</TableHead>
-                    <TableHead className="pr-0">Description</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {spamRules.map((rule) => (
-                    <TableRow key={rule.name} className="hover:bg-transparent">
-                      <TableCell className="pl-0 font-mono text-xs text-foreground">
-                        {rule.name}
-                      </TableCell>
-                      <TableCell className="pr-0">{rule.desc}</TableCell>
+    <AnimatePresence>
+      {rules.length > 0 && (
+        <motion.div
+          className="border-b"
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.2, ease: 'easeOut' }}
+        >
+          <CardContent className="py-6 flex flex-col gap-2">
+            <Admonition
+              type="destructive"
+              title="Issues to resolve"
+              description="This email is likely to be marked as spam by email servers. Please resolve the below issues before saving."
+              className="bg-destructive-300/50 dark:bg-destructive-200 border-destructive-400"
+            />
+
+            <div className="flex flex-col gap-1">
+              <div className="w-full border rounded-md overflow-hidden">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Warning</TableHead>
+                      <TableHead>Description</TableHead>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                  </TableHeader>
+                  <TableBody>
+                    {rules.map((rule) => (
+                      <TableRow key={rule.name}>
+                        <TableCell className="font-mono">{rule.name}</TableCell>
+                        <TableCell>{rule.desc}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <Markdown
+                className="!max-w-none text-foreground-lighter text-xs mt-2"
+                content="Spam validation is powered by [SpamAssassin](https://spamassassin.apache.org/doc.html). Full list of all available warnings can be found [here](https://gist.github.com/ychaouche/a2faff159c2a1fea16019156972c7f8b)."
+              />
             </div>
-            <Separator />
-            <Markdown
-              className="!max-w-none text-foreground-muted text-xs [&_a]:text-foreground-lighter mt-2"
-              content="Spam validation is powered by [SpamAssassin](https://spamassassin.apache.org/doc.html). Full list of all available warnings can be found [here](https://gist.github.com/ychaouche/a2faff159c2a1fea16019156972c7f8b)."
-            />
-          </>
-        )}
-      </div>
-    </div>
+          </CardContent>
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }