Merge pull request #1065 from org2AI/fix/spotlight-center-content-area

fix(spotlight): center over content area excluding sidebar

Author: Chloe-JY

src/engines/ChatPanel/index.tsx

@@ -723,6 +723,7 @@ const ChatPanel: React.FC<ChatPanelProps> = memo(
               <div
                 aria-hidden
                 data-testid="launchpad-workstation-rail-placeholder"
+                data-workstation-trail-track
                 className={`h-full shrink-0 ${resolveFocusedChatWorkstationRailTrackClass(true)}`}
               />
             ) : null

src/modules/shared/layouts/FocusedChatWorkstationRail/index.tsx

@@ -578,6 +578,7 @@ export function FocusedChatWorkstationRail({
           has no drag handle or continuously resizable width. */}
       <div
         data-workstation-pane-control
+        data-workstation-trail-track
         className={`relative flex h-full shrink-0 flex-col items-start transition-[width] duration-200 ease-out motion-reduce:transition-none ${resolveFocusedChatWorkstationRailTrackClass(
           collapsed
         )}`}

src/scaffold/GlobalSpotlight/shell/SpotlightShellChrome.tsx

@@ -2,17 +2,26 @@
  * SpotlightShellChrome
  *
  * Low-level chrome for SpotlightShell: simple panel + optional portal +
- * backdrop + viewport-centered positioning + footer slot beneath the panel.
+ * backdrop + content-area-centered positioning + footer slot beneath the
+ * panel. Horizontal centering excludes the docked layout sidebar and the
+ * focused-chat workstation trail, so the spotlight sits over the visible
+ * content rather than the full viewport.
  *
  * This is a direct merge of the previous SelectorContainer + SpotlightPortal
  * layer. Only consumed by SpotlightShell; palettes never see this component.
  */
 import { useAtomValue } from "jotai";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
+import { useLocation } from "react-router-dom";
 
+import { getSidebarId } from "@src/config/sidebarRegistry";
 import { CODEMIRROR_STYLE_NONCE } from "@src/features/CodeMirror/config/nonce";
 import { useOverlayLayer } from "@src/store/ui/overlayLayerAtom";
+import {
+  sidebarCollapsedAtom,
+  sidebarWidthAtom,
+} from "@src/store/ui/sidebarAtom";
 import { spotlightPlacementAtom } from "@src/store/ui/uiAtom";
 
 import { SPOTLIGHT_CONFIG } from "../constants";
@@ -43,6 +52,30 @@ export const SpotlightShellChrome: React.FC<SpotlightShellChromeProps> = ({
 }) => {
   const inputHostRef = useRef<HTMLDivElement | null>(null);
   const spotlightPlacement = useAtomValue(spotlightPlacementAtom);
+  const location = useLocation();
+  const sidebarWidth = useAtomValue(sidebarWidthAtom);
+  const sidebarCollapsed = useAtomValue(sidebarCollapsedAtom);
+
+  // Routes without a docked layout sidebar (and collapsed sidebars) reserve
+  // no horizontal space, so they contribute no centering inset.
+  const sidebarInset =
+    getSidebarId(location.pathname) !== null && !sidebarCollapsed
+      ? sidebarWidth
+      : 0;
+
+  // The focused-chat workstation trail (live rail or launchpad placeholder)
+  // reserves width at the right edge of the content area. Its visibility
+  // mixes chat-focus state, tab type, a container query, and rail-local
+  // collapse state that no atom exposes, so the rendered track is measured
+  // instead of mirrored. Measured once per open — the backdrop prevents the
+  // trail from changing while the spotlight is up.
+  const trailInset = useMemo(() => {
+    if (!isOpen || !asPortal) return 0;
+    const track = document.querySelector<HTMLElement>(
+      "[data-workstation-trail-track]"
+    );
+    return track ? track.getBoundingClientRect().width : 0;
+  }, [isOpen, asPortal]);
 
   useOverlayLayer(isOpen && asPortal);
 
@@ -147,13 +180,13 @@ export const SpotlightShellChrome: React.FC<SpotlightShellChromeProps> = ({
             spotlightPlacement === "center"
               ? "50%"
               : SPOTLIGHT_CONFIG.topOffset,
-          left: "50%",
+          left: `calc(50% + ${(sidebarInset - trailInset) / 2}px)`,
           transform:
             spotlightPlacement === "center"
               ? "translate(-50%, -50%)"
               : "translateX(-50%)",
           zIndex: SPOTLIGHT_CONFIG.containerZIndex,
-          width: `min(${width}px, calc(100vw - 160px))`,
+          width: `min(${width}px, calc(100vw - ${sidebarInset + trailInset}px - 160px))`,
         }}
         onClick={(event) => event.stopPropagation()}
       >