From 76a75c3a38b338d81727476d4b55d3f7dafbb402 Mon Sep 17 00:00:00 2001 From: Ayush kumar gupta Date: Mon, 24 Aug 2026 11:49:21 +0530 Subject: [PATCH 1/2] fix: increase FAQ question size to H3 and reduce spacing (#1990) --- .../dashboard/Sidebar/DashboardSidebar.tsx | 1 - src/components/faqs/faqs.tsx | 41 +++++++++++-------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/dashboard/Sidebar/DashboardSidebar.tsx b/src/components/dashboard/Sidebar/DashboardSidebar.tsx index c1aed964..a3e8d69d 100644 --- a/src/components/dashboard/Sidebar/DashboardSidebar.tsx +++ b/src/components/dashboard/Sidebar/DashboardSidebar.tsx @@ -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(null); diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx index 913e3f71..5081e4e1 100644 --- a/src/components/faqs/faqs.tsx +++ b/src/components/faqs/faqs.tsx @@ -65,9 +65,9 @@ const FAQs: React.FC = () => { >
-
-

+

{ }} > ✦ FAQs -

+

Looking for answers?

+

- Find answers to the most common questions about recode hive. -

+ 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. +

+
+
-
+
{faqData.filter((_, index) => index % 2 === 0).map((faq, idx) => { const originalIndex = idx * 2; const isOpen = activeIndex === originalIndex; @@ -134,7 +141,7 @@ const FAQs: React.FC = () => { aria-expanded={isOpen} aria-controls={`faq-panel-${originalIndex}`} > - {faq.question} +

{faq.question}

{ : "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 @@ -181,7 +188,7 @@ const FAQs: React.FC = () => { })}
-
+
{faqData.filter((_, index) => index % 2 !== 0).map((faq, idx) => { const originalIndex = idx * 2 + 1; const isOpen = activeIndex === originalIndex; @@ -219,7 +226,7 @@ const FAQs: React.FC = () => { aria-expanded={isOpen} aria-controls={`faq-panel-${originalIndex}`} > - {faq.question} +

{faq.question}

{ : "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 @@ -272,4 +279,4 @@ const FAQs: React.FC = () => { ); }; -export default FAQs; +export default FAQs; \ No newline at end of file From 52ae7e328d5df59025f2177ceeb7f3645e072522 Mon Sep 17 00:00:00 2001 From: Ayush kumar gupta Date: Wed, 16 Sep 2026 10:12:56 +0530 Subject: [PATCH 2/2] fix: resolve documentation sidebar overlap --- src/css/custom.css | 63 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 5 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 9f101944..d024e469 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -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; } @@ -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; } } @@ -2964,7 +2973,7 @@ 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; @@ -2972,7 +2981,8 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] { 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; } @@ -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; +} \ No newline at end of file