diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index d4e86effd3..8101676d41 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -21,7 +21,7 @@ export function HeadlessDoc(props) {
     onHide={() => setVisible(false)}
     content={({ closeIconRef, hide }) => (
         <div className="min-h-screen flex relative lg:static surface-ground">
-            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                 <div className="flex flex-column h-full">
                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                         <span className="inline-flex align-items-center gap-2">
@@ -215,7 +215,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -422,7 +422,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -622,7 +622,7 @@ export default function HeadlessDemo() {
                     onHide={() => setVisible(false)}
                     content={({ closeIconRef, hide }) => (
                         <div className="min-h-screen flex relative lg:static surface-ground">
-                            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                                 <div className="flex flex-column h-full">
                                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                         <span className="inline-flex align-items-center gap-2">