fix(web): home content off-center when sidebar collapsed

The home page centered its content by offsetting with --cheatcode-sidebar-offset,
but that var was never set on the home route: AppSidebar (which sets it) is
Suspense-wrapped for usePathname, so its effect lagged and the root pl fell back
to the 16rem (256px = *expanded* width) default even while the sidebar was
collapsed to a 48px rail — shoving all content ~200px right of center.

- Add HomeSidebarOffset (non-suspended client) that sets the var from the store's
  sidebarCollapsed (56px collapsed / 240px expanded), so the offset is always right.
- The fixed composer form used a hardcoded md:pl-64 instead of the var, so it never
  re-centered on collapse — switch it to md:pl-[var(--cheatcode-sidebar-offset,16rem)].

Verified: collapsed -> greeting + composer both center at 988 (aligned); expanded -> 1080.

Author: iamjr15

apps/web/src/app/page.tsx

@@ -3,12 +3,14 @@ import { HomeComposerFromSearchParams } from "@/components/home/home-composer-fr
 import { HomeGreeting } from "@/components/home/home-greeting";
 import { HomeHeadline } from "@/components/home/home-headline";
 import { HomeSessionChrome } from "@/components/home/home-session-chrome";
+import { HomeSidebarOffset } from "@/components/home/home-sidebar-offset";
 import { AppSidebar } from "@/components/shell/app-sidebar";
 import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 
 export default function HomePage() {
   return (
     <div className="relative min-h-screen bg-white text-[#1b1b1b] transition-[padding] duration-200 md:pl-[var(--cheatcode-sidebar-offset,16rem)]">
+      <HomeSidebarOffset />
       <Suspense fallback={null}>
         <AppSidebar variant="full" />
       </Suspense>

apps/web/src/components/home/home-composer.tsx

@@ -387,7 +387,7 @@ export function HomeComposer({
       <HomeQuickActions activeIntentId={intentId} onIntentClick={selectQuickIntent} />
       {skillCreatorMode ? <SkillCreatorSuggestions onPick={(text) => setValue(text)} /> : null}
       <form
-        className="cheatcode-home-composer-form mt-8 w-full md:pointer-events-none md:fixed md:right-0 md:bottom-8 md:left-0 md:z-20 md:flex md:justify-center md:pl-64"
+        className="cheatcode-home-composer-form mt-8 w-full md:pointer-events-none md:fixed md:right-0 md:bottom-8 md:left-0 md:z-20 md:flex md:justify-center md:pl-[var(--cheatcode-sidebar-offset,16rem)]"
         onSubmit={submit}
       >
         <div className="relative z-10 mx-auto flex w-full max-w-[708px] flex-col gap-0 md:pointer-events-auto">

apps/web/src/components/home/home-sidebar-offset.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAppStore } from "@/lib/store/app-store";
+
+/**
+ * Sets `--cheatcode-sidebar-offset` from the sidebar collapse state so the home
+ * page's content (root padding-left + the fixed composer form) tracks the actual
+ * sidebar width — 56px when collapsed (icon rail), 240px when expanded. The main
+ * `AppSidebar` also sets this, but it is Suspense-wrapped (usePathname), so its
+ * effect can lag on the home route and the var falls back to the 16rem expanded
+ * default even while the rail is collapsed, shoving the content right. This runs
+ * outside that Suspense boundary so the offset is always correct.
+ */
+export function HomeSidebarOffset() {
+  const sidebarCollapsed = useAppStore((state) => state.sidebarCollapsed);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--cheatcode-sidebar-offset",
+      sidebarCollapsed ? "56px" : "240px",
+    );
+  }, [sidebarCollapsed]);
+
+  return null;
+}