Merge pull request #398 from SparkElf/fix/desktop-sidebar-layout-mode

fix: preserve desktop shell layout with side card
This commit is contained in:
Atlas Zeng
2026-09-02 23:44:15 +08:00
committed by GitHub
6 changed files with 186 additions and 60 deletions
+6 -6
View File
@@ -316,7 +316,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
// session header's right-aligned utilities (the "Session log" download
// capsule) must yield. layout.css keys off this body attribute to push the
// header's right padding out past the cluster. Only the CLOSED panel needs
// it — an open panel already squeezes `#root` left, moving the header clear.
// it — an open panel reserves AppFrame padding, moving the header clear.
const collapsed = state === undefined || !state.panelOpen
useEffect(() => {
if (collapsed) document.body.setAttribute('data-dsh-sidebar-collapsed', '')
@@ -703,9 +703,9 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
// from the AppFrame's center column DOM (the parent of the
// [data-slot="conversation"] wrapper — layout.css's center column) so the
// bottom panel tracks the column's real
// horizontal edges — including the animated margin-right push while the
// right panel opens/closes; a frame that never appears keeps the initial
// zero-size fallback (the panel renders at 0 width until measured).
// horizontal edges — including the animated AppFrame padding reservation
// while the right panel opens/closes; a frame that never appears keeps the
// initial zero-size fallback (the panel renders at 0 width until measured).
// The rect lives in a REF (not state): the open/close transition resizes
// the center column EVERY frame for its duration, and reacting per frame
// with setState re-renders the whole Sidebar (every mounted tab) at
@@ -1708,8 +1708,8 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
// Direct from the center column's measured right edge: the bottom
// panel spans ONLY the center column, ending exactly at the
// details column's left edge (the details column sits between the
// center and the right panel, and the right panel's margin-right
// push is already baked into centerRect.right).
// center and the right panel, and the right panel's reserved frame
// padding is already baked into centerRect.right).
right: window.innerWidth - centerRectRef.current.right,
// The seam against the open right panel needs its own hairline
// (the right panel's border-left alone is covered by this panel's