@spunto/design-system 0.30.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/tasks/task-cockpit.tsx

@@ -204,18 +204,22 @@ export function TaskCockpit({
         )}
       </div>
 
-      {/* ── Body: the session owns the room, the facts sit beside it ── */}
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden @min-[64rem]:flex-row">
+      {/* ── Body: the session owns the room, the facts sit beside it ──
+          Side by side from 42rem of *cockpit* width, not 64rem: next to the org-wide list on a
+          laptop (1512 px screen − app sidebar − 320 px list ≈ 936 px) the cockpit is well under
+          64rem, and stacking there dropped the facts under the fold on the most common desktop.
+          The column narrows instead (288 → 320 → 384 px), so the session keeps ≥ 384 px. */}
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden @min-[42rem]:flex-row">
         {/* `min-w-0` is load-bearing: a flex child's default min-width is its *content*, and this
             column holds long mono lines and <pre> blocks. Without it the column refuses to shrink
             and pushes the details column past the edge, where `overflow-hidden` clips it. */}
-        <div className="flex min-h-[280px] min-w-0 flex-1 flex-col border-border @min-[64rem]:border-r">
+        <div className="flex min-h-[280px] min-w-0 flex-1 flex-col border-border @min-[42rem]:border-r">
           {view === "diff" && diff ? diff(tabs) : session(tabs)}
           {composer}
         </div>
 
         {details && (
-          <aside className="max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-border bg-card/40 @min-[64rem]:max-h-none @min-[64rem]:w-80 @min-[64rem]:border-t-0 @min-[80rem]:w-96">
+          <aside className="max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-border bg-card/40 @min-[42rem]:max-h-none @min-[42rem]:w-72 @min-[42rem]:border-t-0 @min-[64rem]:w-80 @min-[80rem]:w-96">
             {details}
           </aside>
         )}