This is an automated email from the ASF dual-hosted git repository.
chaokunyang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fory-site.git
The following commit(s) were added to refs/heads/main by this push:
new 302a8eb2ae fix: docs sidebar rendering at double width on wide screens
(#469)
302a8eb2ae is described below
commit 302a8eb2ae097e2a7b65b3d4bd79b01702f0f4ec
Author: Ayush Kumar <[email protected]>
AuthorDate: Sun Jun 14 18:12:27 2026 +0530
fix: docs sidebar rendering at double width on wide screens (#469)
## What
The docs sidebar renders at roughly double its intended width on wide
screens.
## Why
The previous fix (#468) widened the sidebar container by the navbar
offset (`(100vw - 1280px)/2`) so the padded menu wouldn't clip. On a
1920px-wide screen that offset is ~320px, so `--doc-sidebar-width`
became `300px + 320px = 620px` — about double the intended 300px.
## How
- Revert `--doc-sidebar-width` to the panel width (300px).
- Use the normal `--fory-doc-sidebar-inset` for the menu's left padding
instead of the large navbar offset.
- Remove the now-unused `--fory-doc-sidebar-offset` variable.
The sidebar now stays a consistent 300px at every screen width with no
clipping. Trade-off: the menu text no longer aligns under the centered
navbar logo.
---------
Co-authored-by: Claude Opus 4.8 <[email protected]>
---
src/css/custom.css | 18 ++++++------------
1 file changed, 6 insertions(+), 12 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index 117bfab0e0..ecf1aa504b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -34,14 +34,14 @@
@media (min-width: 997px) {
.navbar {
- padding-left: 1.5rem;
+ /* Align the logo with the docs sidebar inset and run full width so the
+ * brand sits above the sidebar instead of floating in a centered band. */
+ padding-left: var(--fory-doc-sidebar-inset);
padding-right: 1.5rem;
}
.navbar__inner {
- margin-left: auto;
- margin-right: auto;
- max-width: var(--fory-layout-width);
+ max-width: none;
}
.navbar__brand {
@@ -180,17 +180,11 @@
--fory-doc-gutter-width: 18px;
--fory-doc-sidebar-inset: 2rem;
--fory-doc-sidebar-panel-width: 300px;
- --fory-doc-sidebar-offset: max(0px, calc((100vw - var(--fory-layout-width))
/ 2));
--fory-doc-toc-right-inset: 1.5rem;
}
html:root {
- /*
- * The menu is aligned with the centered navbar on wide screens. Keep the
- * Docusaurus sidebar at least that wide, otherwise its overflow clipping
- * hides the menu and the sidebar looks empty.
- */
- --doc-sidebar-width: calc(var(--fory-doc-sidebar-panel-width) +
var(--fory-doc-sidebar-offset));
+ --doc-sidebar-width: var(--fory-doc-sidebar-panel-width);
}
.theme-doc-breadcrumbs,
@@ -352,7 +346,7 @@ html:root {
@media (min-width: 997px) {
.theme-doc-sidebar-menu {
- padding-left: max(.75rem, var(--fory-doc-sidebar-offset));
+ padding-left: var(--fory-doc-sidebar-inset);
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
