From ea539b4f83f413b7dc822be37d962ff3d5444b92 Mon Sep 17 00:00:00 2001
From: Miranda Limonczenko <miranda.limonczenko@supabase.io>
Date: Tue, 23 Jun 2026 10:38:47 -0700
Subject: [PATCH] fix(docs) Remove unneeded double border on docs Accordion
 (#47202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes DOCS-974

<img width="891" height="328" alt="Screenshot 2026-06-22 at 3 11 13 PM"
src="https://github.com/user-attachments/assets/d7b49d56-cf77-4c1d-a933-7cbeab3168c2"
/>


## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Problem

From Linear:

Accordion usage in the docs is inconsistent and can render with double
lines instead of single lines.

The current docs contribution guidance appears to recommend wrapping
accordions with an extra div, which seems to be the cause of the extra
divider in some pages.

## Solution

This PR:
- Removes all wrapping `divs` to AccordionItems that adds an extra
border
- For a11y, adds a cursor pointer and a slight bg color change on hover
to make the clickable area more obvious
- For a11y, adds reduce-motion option for animation and `aria-hidden` on
the chevron

**Note:** It is good for a11y to have more than one hover-state
indicator. For example, color-change and an underline.

## Tophatting

To review changes on the preview environment:
1. Go to `/docs/guides/platform/backups` and
`/docs/guides/platform/migrating-to-supabase/auth0#frequently-asked-questions-faq`.
2. Expand accordion.
3. See nothing visually odd such as strange spacing or double borders.

**Note:** To be exhaustive in your review, view all affected URLs and
scan the docs for `border-b` to see if there are any stragglers.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Enhanced accordion components with improved hover state styling for
better visual feedback.

* **Refactor**
* Simplified accordion markup across documentation pages for cleaner,
more consistent layout and improved component nesting structure.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/app/contributing/content.mdx        | 22 +++++-----------
 apps/docs/content/guides/cron/quickstart.mdx  |  4 +--
 apps/docs/content/guides/platform/backups.mdx |  2 --
 .../backup-restore.mdx                        |  8 +++---
 .../dashboard-restore.mdx                     |  9 ++-----
 .../content/guides/platform/read-replicas.mdx |  5 +---
 ...-access-supabase-project-lovable-cloud.mdx | 25 ++++---------------
 .../edge-function-401-error-response.mdx      | 13 +++-------
 .../edge-function-546-error-response.mdx      |  7 ------
 ...tify-lovable-cloud-or-supabase-backend.mdx | 23 ++++-------------
 .../restore-project-after-90-days-pause.mdx   |  4 +--
 .../ui/src/components/shadcn/ui/accordion.tsx | 20 ++++++++++++---
 12 files changed, 44 insertions(+), 98 deletions(-)

diff --git a/apps/docs/app/contributing/content.mdx b/apps/docs/app/contributing/content.mdx
index a4c0476d5d4..be59011c43b 100644
--- a/apps/docs/app/contributing/content.mdx
+++ b/apps/docs/app/contributing/content.mdx
@@ -26,7 +26,6 @@ For content that requires progressive disclosure:
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="Accordion item 1"
       id="item-1"
@@ -36,8 +35,6 @@ For content that requires progressive disclosure:
 
     </AccordionItem>
 
-  </div>
-  <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="Accordion item 2"
       id="item-2"
@@ -47,7 +44,6 @@ For content that requires progressive disclosure:
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 ```
 
@@ -59,8 +55,7 @@ For content that requires progressive disclosure:
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Accordion item 1"
       id="item-1"
     >
@@ -69,9 +64,7 @@ For content that requires progressive disclosure:
 
     </AccordionItem>
 
-  </div>
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Accordion item 2"
       id="item-2"
     >
@@ -80,7 +73,6 @@ For content that requires progressive disclosure:
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 ### Admonition
@@ -277,6 +269,7 @@ You can also import the `supabase-js` library here:
 ````mdx
 ```js
 import { createClient } from '@supabase/supabase-js'
+
 const supabase = createClient('dummy', 'client')
 
 // ---cut---
@@ -291,6 +284,7 @@ Note the hidden statements above the cut. Hover over `signInWithPassword` to see
 
 ```js
 import { createClient } from '@supabase/supabase-js'
+
 const supabase = createClient('dummy', 'client')
 
 // ---cut---
@@ -513,8 +507,7 @@ We incorporate content reuse in the docs to avoid duplication. If you find yours
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Database setup"
       id="database-setup"
     >
@@ -527,9 +520,7 @@ We incorporate content reuse in the docs to avoid duplication. If you find yours
 
     </AccordionItem>
 
-  </div>
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Create client for Auth"
       id="create-client-auth"
     >
@@ -542,7 +533,6 @@ We incorporate content reuse in the docs to avoid duplication. If you find yours
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 To make a new partial:
diff --git a/apps/docs/content/guides/cron/quickstart.mdx b/apps/docs/content/guides/cron/quickstart.mdx
index 9ec8b35a846..38cb3cd7cd6 100644
--- a/apps/docs/content/guides/cron/quickstart.mdx
+++ b/apps/docs/content/guides/cron/quickstart.mdx
@@ -46,8 +46,7 @@ select cron.schedule('permanent-cron-job-name', '30 seconds', 'CALL do_something
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Cron syntax"
       id="item-1"
     >
@@ -68,7 +67,6 @@ select cron.schedule('permanent-cron-job-name', '30 seconds', 'CALL do_something
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 <Admonition type="note">
diff --git a/apps/docs/content/guides/platform/backups.mdx b/apps/docs/content/guides/platform/backups.mdx
index 9a2123b6f4c..620117f4e2c 100644
--- a/apps/docs/content/guides/platform/backups.mdx
+++ b/apps/docs/content/guides/platform/backups.mdx
@@ -97,7 +97,6 @@ Projects that want to use PITR must also use at least a Small compute add-on to
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="How PITR works"
       id="item-1"
@@ -111,7 +110,6 @@ Projects that want to use PITR must also use at least a Small compute add-on to
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 <Admonition type="note">
diff --git a/apps/docs/content/guides/platform/migrating-within-supabase/backup-restore.mdx b/apps/docs/content/guides/platform/migrating-within-supabase/backup-restore.mdx
index c686e8ca188..744d61ee7c5 100644
--- a/apps/docs/content/guides/platform/migrating-within-supabase/backup-restore.mdx
+++ b/apps/docs/content/guides/platform/migrating-within-supabase/backup-restore.mdx
@@ -84,11 +84,9 @@ breadcrumb: 'Migrations'
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem header="Install Postgres and psql" id="install-postgres">
-      <$Partial path="postgres_installation.mdx" />
-    </AccordionItem>
-  </div>
+  <AccordionItem header="Install Postgres and psql" id="install-postgres">
+    <$Partial path="postgres_installation.mdx" />
+  </AccordionItem>
 </Accordion>
 
 ### Restore backup using CLI
diff --git a/apps/docs/content/guides/platform/migrating-within-supabase/dashboard-restore.mdx b/apps/docs/content/guides/platform/migrating-within-supabase/dashboard-restore.mdx
index 3e59cdeb9a7..f403e599b68 100644
--- a/apps/docs/content/guides/platform/migrating-within-supabase/dashboard-restore.mdx
+++ b/apps/docs/content/guides/platform/migrating-within-supabase/dashboard-restore.mdx
@@ -20,17 +20,13 @@ Dashboard backups are only available for older projects that still use logical b
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Install Postgres and psql"
       id="install-postgres"
     >
       <$Partial path="postgres_installation.mdx" />
     </AccordionItem>
-
-  </div>
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Create and configure a new project"
       id="create-project"
     >
@@ -52,7 +48,6 @@ Dashboard backups are only available for older projects that still use logical b
       </StepHikeCompact>
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 ## Things to keep in mind
diff --git a/apps/docs/content/guides/platform/read-replicas.mdx b/apps/docs/content/guides/platform/read-replicas.mdx
index 2fb83ea8c4f..e0a106e0c3d 100644
--- a/apps/docs/content/guides/platform/read-replicas.mdx
+++ b/apps/docs/content/guides/platform/read-replicas.mdx
@@ -38,8 +38,7 @@ You can only read data from a Read Replica. This is in contrast to a Primary dat
   size="large"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Do you need Read Replicas?"
       id="rr-flow"
     >
@@ -53,8 +52,6 @@ You can only read data from a Read Replica. This is in contrast to a Primary dat
 
     </AccordionItem>
 
-  </div>
-
 </Accordion>
 
 ## Features
diff --git a/apps/docs/content/troubleshooting/cant-access-supabase-project-lovable-cloud.mdx b/apps/docs/content/troubleshooting/cant-access-supabase-project-lovable-cloud.mdx
index ab90657e827..b090af0c2ab 100644
--- a/apps/docs/content/troubleshooting/cant-access-supabase-project-lovable-cloud.mdx
+++ b/apps/docs/content/troubleshooting/cant-access-supabase-project-lovable-cloud.mdx
@@ -60,8 +60,7 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Can I get access to the Supabase SQL editor when using Lovable Cloud?"
       id="sql-editor-access"
     >
@@ -70,10 +69,7 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Why doesn't my Supabase project appear on my dashboard?"
       id="project-not-showing"
     >
@@ -82,10 +78,7 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Can I disconnect my project from Lovable Cloud and connect it to my own Supabase account?"
       id="disconnect-project"
     >
@@ -96,10 +89,7 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="I can't get my database URL to connect from an external tool (like BI tools or Postgres connectors)."
       id="database-url"
     >
@@ -108,10 +98,7 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="I can't get my service role key to integrate an external service (like n8n or Make.com)."
       id="service-role-key"
     >
@@ -122,6 +109,4 @@ For more information, read [the Lovable Cloud FAQ](https://docs.lovable.dev/feat
 
     </AccordionItem>
 
-  </div>
-
 </Accordion>
diff --git a/apps/docs/content/troubleshooting/edge-function-401-error-response.mdx b/apps/docs/content/troubleshooting/edge-function-401-error-response.mdx
index 91d669e2415..b6e3ffc3eee 100644
--- a/apps/docs/content/troubleshooting/edge-function-401-error-response.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-401-error-response.mdx
@@ -143,8 +143,7 @@ Your project uses the [new asymmetric keys](/blog/jwt-signing-keys) for authenti
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Method A: Dashboard"
       id="item-1"
     >
@@ -154,10 +153,7 @@ In the [Functions Dashboard](/dashboard/project/_/functions/), open the affected
 ![image](/docs/img/troubleshooting/401_edge_functions_toggle_off_JWT_check.png)
 
   </AccordionItem>
-
-  </div>
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Method B: Supabase CLI"
       id="item-2"
     >
@@ -170,9 +166,7 @@ supabase functions deploy YOUR_FUNCTION_NAME --no-verify-jwt
 
     </AccordionItem>
 
-  </div>
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Method C: Management API"
       id="item-3"
     >
@@ -192,7 +186,6 @@ curl 'https://api.supabase.com/v1/projects/PROJECT_ID/functions/FUNCTION_NAME' \
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 ### Invalid key
diff --git a/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx b/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
index 5a632cc7455..cc869fa405a 100644
--- a/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
@@ -141,7 +141,6 @@ There are a few other queries that may be useful for identifying patterns around
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="Checking if a specific version is an offender"
       id="item-1"
@@ -169,8 +168,6 @@ order by pct_546;
 
     </AccordionItem>
 
-  </div>
-  <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="Check error frequency by time"
       id="item-2"
@@ -208,9 +205,6 @@ LIMIT 24;
 
     </AccordionItem>
 
-  </div>
-
-      <div className="border-b mt-3 pb-3">
     <AccordionItem
       header="Check requests per isolate"
       id="item-3"
@@ -246,7 +240,6 @@ GROUP BY metadata.execution_id
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 ## Step 3: Correcting the error
diff --git a/apps/docs/content/troubleshooting/identify-lovable-cloud-or-supabase-backend.mdx b/apps/docs/content/troubleshooting/identify-lovable-cloud-or-supabase-backend.mdx
index 681ba694b81..ad7d7d68cc0 100644
--- a/apps/docs/content/troubleshooting/identify-lovable-cloud-or-supabase-backend.mdx
+++ b/apps/docs/content/troubleshooting/identify-lovable-cloud-or-supabase-backend.mdx
@@ -60,8 +60,7 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Does this affect where my app is hosted?"
       id="app-hosting"
     >
@@ -70,10 +69,7 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Can I access my database URL or API keys if I'm on Lovable Cloud?"
       id="database-api-access"
     >
@@ -82,10 +78,7 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Can I switch from Lovable Cloud to my own Supabase backend?"
       id="switch-backend"
     >
@@ -96,7 +89,6 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 ## Lovable Cloud – specific questions
@@ -109,8 +101,7 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="My project uses Lovable Cloud, can I move it to Supabase?"
       id="move-to-supabase"
     >
@@ -123,10 +114,7 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
 
     </AccordionItem>
 
-  </div>
-
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="My project uses Lovable Cloud, but I can't see my Supabase project."
       id="cant-see-project"
     >
@@ -137,5 +125,4 @@ If the page displays the Supabase icon, your Supabase project name, and some lin
 
     </AccordionItem>
 
-  </div>
 </Accordion>
diff --git a/apps/docs/content/troubleshooting/restore-project-after-90-days-pause.mdx b/apps/docs/content/troubleshooting/restore-project-after-90-days-pause.mdx
index 69ff401808e..3c91adbfe70 100644
--- a/apps/docs/content/troubleshooting/restore-project-after-90-days-pause.mdx
+++ b/apps/docs/content/troubleshooting/restore-project-after-90-days-pause.mdx
@@ -81,8 +81,7 @@ chmod +x sync_supabase_config.sh
   size="medium"
   className="text-foreground-light mt-8 mb-6"
 >
-  <div className="border-b mt-3 pb-3">
-    <AccordionItem
+  <AccordionItem
       header="Config sync script"
       id="config-sync-script"
     >
@@ -280,7 +279,6 @@ echo "Done. Configs saved to ${OUTDIR}/"
 
     </AccordionItem>
 
-  </div>
 </Accordion>
 
 The script saves both source and target configs to a local `config_sync_<timestamp>/` directory so you can review exactly what changed. Use `--dry-run` to preview differences without applying them.
diff --git a/packages/ui/src/components/shadcn/ui/accordion.tsx b/packages/ui/src/components/shadcn/ui/accordion.tsx
index 3fe13251534..34ed3cc306e 100644
--- a/packages/ui/src/components/shadcn/ui/accordion.tsx
+++ b/packages/ui/src/components/shadcn/ui/accordion.tsx
@@ -24,13 +24,24 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 gap-2 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-left',
+        'cursor-pointer flex flex-1 gap-2 items-center justify-between py-4 text-left',
+        'font-medium transition-all hover:underline',
+        '[&[data-state=open]>svg]:rotate-180',
         className
       )}
       {...props}
     >
       {children}
-      {!hideIcon && <ChevronDown className="h-4 w-4 transition-transform duration-200 shrink-0" />}
+      {!hideIcon && (
+        <ChevronDown
+          aria-hidden="true"
+          className={cn(
+            'h-4 w-4 shrink-0',
+            'transition-transform duration-200',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+          )}
+        />
+      )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -43,7 +54,10 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      'overflow-hidden text-sm',
+      'transition-all motion-reduce:transition-none',
+      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      'motion-reduce:animate-none',
       className
     )}
     {...props}