fix(desktop): session skeletons stand on the same edge as the rows they become

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.

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>
   )
 }