From ceed8bf792fc53bd2ab4b549733011faf7ca8619 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 10 Feb 2025 16:03:35 +0800
Subject: [PATCH] Fix text overlapping in PublicSchemaNotEnabledAlert (#33473)

* Fix text overlapping in PublicSchemaNotEnabledAlert

* Update

* Smol fix
---
 .../Database/Schemas/SchemaGraph.tsx          |  2 +-
 .../interfaces/Docs/Introduction.tsx          |  6 +--
 .../Docs/Pages/Tables/Introduction.tsx        |  9 ++--
 .../Docs/PublicSchemaNotEnabledAlert.tsx      | 44 ++++++++-----------
 4 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 7bd792f6b5e..2c9b2aa0fe3 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -172,7 +172,7 @@ export const SchemaGraph = () => {
                   deletable: false,
                   style: {
                     stroke: 'hsl(var(--border-stronger))',
-                    strokeWidth: 0.5,
+                    strokeWidth: 1,
                   },
                 }}
                 nodeTypes={nodeTypes}
diff --git a/apps/studio/components/interfaces/Docs/Introduction.tsx b/apps/studio/components/interfaces/Docs/Introduction.tsx
index ae8dd1b4f9d..18ee355957d 100644
--- a/apps/studio/components/interfaces/Docs/Introduction.tsx
+++ b/apps/studio/components/interfaces/Docs/Introduction.tsx
@@ -15,7 +15,7 @@ export default function Introduction({ selectedLang }: Props) {
   const { ref: projectRef } = useParams()
 
   const { data: settings } = useProjectSettingsV2Query({ projectRef })
-  const { data: config } = useProjectPostgrestConfigQuery({ projectRef })
+  const { data: config, isSuccess } = useProjectPostgrestConfigQuery({ projectRef })
 
   const protocol = settings?.app_config?.protocol ?? 'https'
   const hostEndpoint = settings?.app_config?.endpoint
@@ -42,9 +42,9 @@ export default function Introduction({ selectedLang }: Props) {
             the easiest way to interact with everything we offer within the Supabase ecosystem.
           </p>
         </article>
-        <article className="code">
+        <article className="code flex flex-col gap-y-2">
           <CodeSnippet selectedLang={selectedLang} snippet={Snippets.init(endpoint)} />
-          {!isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
+          {isSuccess && !isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
         </article>
       </div>
     </>
diff --git a/apps/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx b/apps/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
index d3116933cb6..5a7ad40d0f1 100644
--- a/apps/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
+++ b/apps/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx
@@ -13,7 +13,7 @@ interface IntroductionProps {
 const Introduction = ({ selectedLang }: IntroductionProps) => {
   const { ref: projectRef } = useParams()
 
-  const { data: config } = useProjectPostgrestConfigQuery({ projectRef })
+  const { data: config, isSuccess } = useProjectPostgrestConfigQuery({ projectRef })
 
   const isPublicSchemaEnabled = config?.db_schema
     .split(',')
@@ -24,13 +24,14 @@ const Introduction = ({ selectedLang }: IntroductionProps) => {
     <>
       <h2 className="doc-heading">Introduction</h2>
       <div className="doc-section">
-        <article className="code-column text-foreground">
+        <article className="code-column text-foreground flex flex-col gap-y-2">
           <p>
             All views and tables in the <code>public</code> schema and accessible by the active
             database role for a request are available for querying.
           </p>
-
-          {!isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
+        </article>
+        <article className="code">
+          {isSuccess && !isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
         </article>
       </div>
 
diff --git a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
index 99be76b020f..15d2a8b505c 100644
--- a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
+++ b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
@@ -1,36 +1,28 @@
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { Info } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
 import Link from 'next/link'
+
 import { useParams } from 'common'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 const PublicSchemaNotEnabledAlert = () => {
   const { ref: projectRef } = useParams()
 
   return (
-    <Alert_Shadcn_ variant="default">
-      <Info className="h-4 w-4" />
-      <AlertTitle_Shadcn_ className="!-mt-4">
-        <ReactMarkdown>The `public` schema for this project is not exposed</ReactMarkdown>
-      </AlertTitle_Shadcn_>
-      <AlertDescription_Shadcn_ className="grid gap-3 !-mt-7">
-        <ReactMarkdown>
-          You will not be able to query tables and views in the `public` schema via supabase-js or
-          HTTP clients.
-        </ReactMarkdown>
-
-        <div className="!-mt-4 inline-block">
-          <Button asChild type="default">
-            <Link
-              href={`/project/${projectRef}/settings/api#postgrest-config`}
-              className="!no-underline !hover:bg-surface-100 !text-foreground"
-            >
-              View schema settings
-            </Link>
-          </Button>
-        </div>
-      </AlertDescription_Shadcn_>
-    </Alert_Shadcn_>
+    <Admonition type="default">
+      <p className="!mt-0 !mb-1.5">The public schema for this project is not exposed</p>
+      <p className="!mt-0 !mb-1.5 text-foreground-light">
+        You will not be able to query tables and views in the public schema via supabase-js or HTTP
+        clients. Configure this behavior in your project's Data API settings.
+      </p>
+      <Button asChild type="default" className="mt-1">
+        <Link
+          href={`/project/${projectRef}/settings/api#postgrest-config`}
+          className="!no-underline"
+        >
+          View API settings
+        </Link>
+      </Button>
+    </Admonition>
   )
 }