From aa08d0fdf410159465c0164edb7dde66bcfe6ec4 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 20 Aug 2026 11:35:30 -0500
Subject: [PATCH] fix(desktop): session skeletons stand on the same edge as the
 rows they become
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The loading placeholder had its own copy of the row grid — its own min-height,
its own two columns, `pl-2` and no trailing inset — so its right-hand block sat
several pixels off from where the real rows land. The list stepped sideways as
sessions resolved.

Compose the shared row chrome instead, which is where that inset lives.
---
 .../src/app/chat/sidebar/section-states.tsx   | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src/app/chat/sidebar/section-states.tsx b/apps/desktop/src/app/chat/sidebar/section-states.tsx
index d65eda9813..62e334a5e9 100644
--- a/apps/desktop/src/app/chat/sidebar/section-states.tsx
+++ b/apps/desktop/src/app/chat/sidebar/section-states.tsx
@@ -4,19 +4,22 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
+import { SidebarRowCluster, SidebarRowShell, SidebarRowStack } from './chrome'
+
+// Stands in for session rows, so it borrows their chrome instead of copying
+// the grid — a placeholder on a different edge than the rows it resolves into
+// makes the list step sideways on load.
 export function SidebarSessionSkeletons() {
   return (
-    <div aria-hidden="true" className="grid gap-px">
+    <SidebarRowStack aria-hidden="true">
       {['w-32', 'w-40', 'w-28', 'w-36', 'w-24'].map((width, i) => (
-        <div
-          className="grid min-h-[1.625rem] grid-cols-[minmax(0,1fr)_1.375rem] items-center rounded-md pl-2"
-          key={`${width}-${i}`}
-        >
-          <Skeleton className={cn('h-3 rounded-sm', width)} />
-          <Skeleton className="mx-auto size-3.5 rounded-sm opacity-60" />
-        </div>
+        <SidebarRowShell actions={<Skeleton className="size-3.5 rounded-sm opacity-60" />} key={`${width}-${i}`}>
+          <SidebarRowCluster>
+            <Skeleton className={cn('h-3 rounded-sm', width)} />
+          </SidebarRowCluster>
+        </SidebarRowShell>
       ))}
-    </div>
+    </SidebarRowStack>
   )
 }