From 6ce6ce44e4ca767880d88ace265f5280f1486a74 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Fri, 24 Jul 2026 09:48:43 +0800
Subject: [PATCH] fix(layout): stop content-layout width:100% from covering the
 sidebar

Zibll dual-column relies on margin carving out .content-layout while width
stays auto. Under border-box, width:100% + margin-right kept the border-box
at full container width so .sidebar (margin-left:-311px) sat under the main
column. Drop the forced 100% width, pin layout 2/3 gutters and sidebar
negative margins to Zibll's 311px (+ CSS var fallback).
---
 assets/css/frontend/layout.css | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/assets/css/frontend/layout.css b/assets/css/frontend/layout.css
index abbce1b4..43dc5aa6 100644
--- a/assets/css/frontend/layout.css
+++ b/assets/css/frontend/layout.css
@@ -87,8 +87,13 @@ main.content-shell::after,
   clear: both;
 }
 
-/* Zibll: .content-wrap { float:left; width:100%; } — display:block restores float
- * if a route stylesheet accidentally set flex/grid on the wrap. */
+/* Zibll main.css 1:1 dual-column (float + negative-margin).
+ *
+ * Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box
+ * a 100% width + margin-right gutter keeps the border-box at full container
+ * width, so the gutter never shrinks the content box and .sidebar (margin-left:-311px)
+ * sits under the main column (overlap). Zibll only sets margin on .content-layout;
+ * width stays auto so margin carves out the column. */
 .content-wrap {
   float: left;
   width: 100%;
@@ -99,8 +104,10 @@ main.content-shell::after,
 
 .content-layout {
   display: block;
-  width: 100%;
+  /* width:auto — never 100%; margin must shrink the used width */
+  width: auto;
   min-width: 0;
+  max-width: none;
   margin-right: 0;
   margin-left: 0;
   box-sizing: border-box;
@@ -114,6 +121,7 @@ main.content-shell::after,
 /* Base sidebar column (Zibll .sidebar defaults) — layout variants override below */
 .sidebar {
   float: left;
+  width: 311px; /* Zibll hard 311px; --sidebar-width kept in sync via runtime vars */
   width: var(--sidebar-width, 311px);
   min-width: 0;
   position: relative;
@@ -144,17 +152,21 @@ body.site-layout-1 .content-layout--no-sidebar,
   margin-right: 0 !important;
 }
 
-/* Sidebar RIGHT (layout 2) — Zibll uses hard 311px; runtime --sidebar-width must match */
+/* Sidebar RIGHT (layout 2) — Zibll: margin-right: calc(311px + 15px) only */
 body.site-layout-2 .content-layout,
 .site-layout-2 .content-layout {
+  margin-right: calc(311px + 15px);
   margin-right: calc(var(--sidebar-width, 311px) + 15px);
   margin-left: 0;
+  width: auto;
 }
 
 body.site-layout-2 .sidebar,
 .site-layout-2 .sidebar {
   float: left;
+  width: 311px;
   width: var(--sidebar-width, 311px);
+  margin-left: -311px;
   margin-left: calc(0px - var(--sidebar-width, 311px));
   position: unset;
 }
@@ -162,13 +174,16 @@ body.site-layout-2 .sidebar,
 /* Sidebar LEFT (layout 3) */
 body.site-layout-3 .content-layout,
 .site-layout-3 .content-layout {
+  margin-left: calc(311px + 15px);
   margin-left: calc(var(--sidebar-width, 311px) + 15px);
   margin-right: unset;
+  width: auto;
 }
 
 body.site-layout-3 .sidebar,
 .site-layout-3 .sidebar {
   float: left;
+  width: 311px;
   width: var(--sidebar-width, 311px);
   margin-left: -100%;
   position: unset;