McRitchie Studio

Agent Context

Layout-only: on /deployments, the Current Release and Last Release modules currently stack vertically (see operator screenshot). Put them SIDE BY SIDE on wide screens, stacked on narrow. The two are rendered sequentially in app/views/tasks/_board.html.erb (~L214-216, gated on current_release || last_release, renders _current_release then _last_release). Wrap BOTH renders in a responsive grid container, e.g. <div class='grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6'> ... </div>, so lg+ = two columns, below lg = one column. CRITICAL FOOTGUN (burned 3x, in memory): grid items must NOT carry their own mb-* — margin on a grid cell shrinks the visible box. So DROP the mb-6 from each card's outer div in _current_release.html.erb (BOTH the present AND the empty-state branches) and _last_release.html.erb; let the grid gap + the container's mb-6 handle spacing. Pick the cleaner alignment for unequal-height cards (empty Current is short, Last is tall with member pills) — items-start (top-aligned natural heights) usually reads better than stretch; your call, but verify BOTH states look right: (1) active release present + last (two full cards) and (2) Current empty-state + last (short card beside tall card). Keep dark/light theme parity. ui-only shape → [component] test that /deployments wraps the two modules in the grid container (or asserts both modules present within the grid).