From 52b6bb6ffe60bb14c336c25652a476957503dfd6 Mon Sep 17 00:00:00 2001
From: yash <49yash@gmail.com>
Date: Sun, 29 Dec 2024 17:24:27 +0530
Subject: [PATCH] keep active accordion in viewport

---
 .../accordion/demos/hero/css-modules/index.module.css       | 4 ++++
 .../components/accordion/demos/hero/tailwind/index.tsx      | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css
index 839037f44f..b13cc2b4b2 100644
--- a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css
@@ -10,6 +10,10 @@
 
 .Item {
   border-bottom: 1px solid var(--color-gray-200);
+
+  &[data-closed] {
+    overflow-anchor: none;
+  }
 }
 
 .Header {
diff --git a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
index 8ba8a16ddd..0ae5fb104e 100644
--- a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Accordion } from '@base-ui-components/react/accordion';
 export default function ExampleAccordion() {
   return (
     <Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             What is Base UI?
@@ -19,7 +19,7 @@ export default function ExampleAccordion() {
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             How do I get started?
@@ -34,7 +34,7 @@ export default function ExampleAccordion() {
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             Can I use it for my project?