Skip to content

fix: resolve documentation sidebar overlap #2124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ayushgupta2408 wants to merge 2 commits into
base: main
Choose a base branch
from
+82 −23
Open

fix: resolve documentation sidebar overlap #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76a75c3
fix: increase FAQ question size to H3 and reduce spacing (#1990)
Ayushgupta2408 Aug 24, 2026
52ae7e3
fix: resolve documentation sidebar overlap
Ayushgupta2408 Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/components/dashboard/Sidebar/DashboardSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export default function DashboardSidebar({
}: DashboardSidebarProps): React.JSX.Element {
const { user } = useUser();
const { signOut, openUserProfile } = useClerk();

const [collapsed, setCollapsed] = useState(false);
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const profileMenuRef = useRef<HTMLDivElement>(null);
Expand Down
41 changes: 24 additions & 17 deletions src/components/faqs/faqs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,38 +65,45 @@ const FAQs: React.FC = () => {
>
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="w-full">
<div className="mb-10 text-center lg:mb-14">
<p
className="mb-2.5 inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase"
<div className="mb-5 text-center lg:mb-6">
<h3
className="mb-1 inline-flex items-center gap-2 text-sm font-bold tracking-widest uppercase"
style={{
color: isDark ? "#4ade80" : "#16a34a",
fontFamily:
"'Space Grotesk', 'Inter', -apple-system, sans-serif",
}}
>
✦ FAQs
</p>
</h3>
<h2
className="text-3xl font-bold leading-tight tracking-tight sm:text-4xl"
style={{
color: isDark ? "#ffffff" : "#0f172a",
fontFamily:
"'Space Grotesk', 'Inter', -apple-system, sans-serif",
margin: "0",
}}
>
Looking for answers?
</h2>
<div className="flex w-full justify-center">
<p
className={`mx-auto mt-3 max-w-3xl text-base ${isDark ? "text-gray-400" : "text-gray-600"
}`}
style={{ textAlign: "center" }}
>
Find answers to the most common questions about recode hive.
</p>
className={`mx-auto max-w-3xl text-base ${isDark ? "text-gray-400" : "text-gray-600"
}`}
style={{
textAlign: "center",
width: "100%",
}}
>
Find answers to the most common questions about recode hive.
</p>
</div>
</div>


<div className="mx-auto flex max-w-5xl flex-col items-start gap-4 md:flex-row md:gap-6">
<div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
<div className="flex w-full flex-1 flex-col gap-3 md:gap-4">
{faqData.filter((_, index) => index % 2 === 0).map((faq, idx) => {
const originalIndex = idx * 2;
const isOpen = activeIndex === originalIndex;
Expand Down Expand Up @@ -134,7 +141,7 @@ const FAQs: React.FC = () => {
aria-expanded={isOpen}
aria-controls={`faq-panel-${originalIndex}`}
>
<span>{faq.question}</span>
<h3 className="text-lg font-semibold md:text-xl m-0">{faq.question}</h3>
<motion.span
className="transform transition-transform duration-300"
animate={{ rotate: isOpen ? 180 : 0 }}
Expand All @@ -161,7 +168,7 @@ const FAQs: React.FC = () => {
: "1px solid rgba(0, 0, 0, 0.10)",
background: isDark ? "#161616" : "#FFFFFF",
color: isDark ? "#d1d5db" : "#111827",
padding: "1rem 1.25rem 1.25rem",
padding: "0.5rem 1.25rem 1rem",
}}
dangerouslySetInnerHTML={{
__html: faq.answer
Expand All @@ -181,7 +188,7 @@ const FAQs: React.FC = () => {
})}
</div>

<div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
<div className="flex w-full flex-1 flex-col gap-3 md:gap-4">
{faqData.filter((_, index) => index % 2 !== 0).map((faq, idx) => {
const originalIndex = idx * 2 + 1;
const isOpen = activeIndex === originalIndex;
Expand Down Expand Up @@ -219,7 +226,7 @@ const FAQs: React.FC = () => {
aria-expanded={isOpen}
aria-controls={`faq-panel-${originalIndex}`}
>
<span>{faq.question}</span>
<h3 className="text-lg font-semibold md:text-xl m-0">{faq.question}</h3>
<motion.span
className="transform transition-transform duration-300"
animate={{ rotate: isOpen ? 180 : 0 }}
Expand All @@ -246,7 +253,7 @@ const FAQs: React.FC = () => {
: "1px solid rgba(0, 0, 0, 0.10)",
background: isDark ? "#161616" : "#FFFFFF",
color: isDark ? "#d1d5db" : "#111827",
padding: "1rem 1.25rem 1.25rem",
padding: "0.5rem 1.25rem 1rem",
}}
dangerouslySetInnerHTML={{
__html: faq.answer
Expand All @@ -272,4 +279,4 @@ const FAQs: React.FC = () => {
);
};

export default FAQs;
export default FAQs;
63 changes: 58 additions & 5 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,17 @@
margin: 2px 0;
}

/* Custom spacing for sidebar */
.theme-doc-sidebar-container {
/* Custom spacing for sidebar.
IMPORTANT: this must be set on :root (not on .theme-doc-sidebar-container)
because Docusaurus's own docMainContainer CSS module reads the SAME
--doc-sidebar-width variable to compute its max-width via
calc(100% - var(--doc-sidebar-width)). Custom properties only cascade to
descendants, and .docMainContainer is a SIBLING of the sidebar container,
not a child of it — so scoping the variable to the sidebar selector only
changed the sidebar's own width while the main content kept using the
default 300px, producing a mismatch that pushed/cut off content on the
right. Setting it on :root keeps both sides in sync. */
:root {
--doc-sidebar-width: 320px;
}

Expand Down Expand Up @@ -2662,7 +2671,7 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
}

.blog-wrapper .container>.row>.col:not(.col--2):not(.col--3)>* {
max-width: 960px !important;
max-width: 1100px !important;
}
}

Expand Down Expand Up @@ -2964,15 +2973,16 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
}

/* Fix mobile navigation sidebar overlap and layout alignment under 480px */
@media screen and (max-width: 480px) {
@media screen and (max-width: 996px) {
.theme-doc-sidebar-container {
width: 100% !important;
position: fixed !important;
z-index: 9999 !important;
padding: 12px !important;
}

.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module {
.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module,
main[class*="docMainContainer_"] {
padding-left: 16px !important;
padding-right: 16px !important;
}
Expand Down Expand Up @@ -3071,3 +3081,46 @@ div[class*='sidebarViewport_'] {
opacity: 0.4 !important;
cursor: not-allowed !important;
}

/* ===== Fix: doc page content overflowing/cut off on the right instead of
wrapping, once the sidebar sits correctly in-flow next to it. This is the
classic flex-child-won't-shrink bug: a flex item defaults to
min-width: auto, so text/headings wider than the remaining space push the
whole column past the viewport edge instead of wrapping. ===== */
div[class*="docRoot_"],
div[class*="docPage__layout"],
.theme-doc-page,
main[class*="docMainContainer_"] {
max-width: 100% !important;
box-sizing: border-box !important;
}

main[class*="docMainContainer_"] {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}

.theme-doc-sidebar-container {
flex: 0 0 auto !important;
}

.theme-doc-markdown,
article[class*="docItemContainer_"],
.theme-doc-markdown h1,
.theme-doc-markdown h2,
.theme-doc-markdown h3,
.theme-doc-markdown p,
.theme-doc-markdown li {
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}

/* Prevent any accidental horizontal scroll at the page level */
html,
body,
#__docusaurus {
overflow-x: hidden !important;
}
Loading