fix(docs) Remove unneeded double border on docs Accordion (#47202)

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

@@ -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:

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">

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">

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

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

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

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>

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

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

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>

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.

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}