fix(atlas): visual empty stats state

client/src/components/shared/EmptyState.tsx

@@ -10,6 +10,10 @@ import MDancingTrek, { type TrekScene, type TrekMood } from '../../mobile/compon
  * so we map them onto the desktop palette here. Its `.trek-*` choreography is
  * global CSS, so it animates outside the shell as-is. `surface` should match the
  * background the state sits on so the cut-out eyes read as holes (default: card).
+ *
+ * `layout="row"` puts the mascot beside the title with tight padding, for short
+ * content-sized panels (the Atlas glass pill) where the stacked look towers over
+ * the sibling states.
  */
 export default function EmptyState({
   scene = 'idle',
@@ -17,6 +21,7 @@ export default function EmptyState({
   title,
   size = 104,
   surface = 'var(--bg-card)',
+  layout = 'stack',
   className = '',
   action,
 }: {
@@ -25,13 +30,17 @@ export default function EmptyState({
   title: string
   size?: number
   surface?: string
+  layout?: 'stack' | 'row'
   className?: string
   /** Optional call to action under the title, for states that have an obvious next step. */
   action?: ReactNode
 }) {
+  const layoutClasses = layout === 'row'
+    ? 'flex flex-row items-center justify-center gap-3 px-6 py-3'
+    : 'flex flex-col items-center justify-center gap-3 px-6 py-12 text-center'
   return (
     <div
-      className={`flex flex-col items-center justify-center gap-3 px-6 py-12 text-center ${className}`}
+      className={`${layoutClasses} ${className}`}
       style={{ '--m-ink': 'var(--text-primary)', '--m-bg': surface } as CSSProperties}
     >
       <MDancingTrek scene={scene} mood={mood} size={size} />