Create panel: fx on the second row

Shot from the real Sidebar component with the app's own styles.css, panel opened by clicking its button. Six variants: before/after × three availability states × two viewports.

The change. The picker is a 6-column grid. A seventh CLI used to wrap to a third line alone; now the overflow joins row two ahead of the session types, separated by one real empty grid cell.

fx goes first, not last. The grid reads left-to-right, top-to-bottom, so row two column one is the next cell after row one column six โ€” the seven CLIs stay one uninterrupted run and the wrap disappears as a category break. It also degrades better: with fx first, the gap sits at a fixed column and a missing remote simply shortens the right-hand end. With fx last, a missing button would slide fx leftward and the separation would wander.

Cells per row

statebeforeafter
all CLIsrow1 7 (wraps), row2 4row1 6, row2 6 โ€” exact fit
remote absentrow1 7 (wraps), row2 3row1 6, row2 5
OpenClaw unavailablerow1 7 (wraps), row2 4row1 6, row2 6

An unavailable CLI renders dimmed rather than disappearing, so row one is always exactly six and the two rows cannot go ragged from availability alone.

All CLIs present

before desktop
before-all-desktop.png

Seven CLIs in a six-column grid: fx wraps onto a line of its own.

after desktop
after-all-desktop.png

fx joins row two, then an empty cell, then the session types.

before phone (390px, sidebar full-width)
before-all-phone.png
after phone (390px, sidebar full-width)
after-all-phone.png

Remote absent

before desktop
before-no-remote-desktop.png

Row two loses a button; fx is still stranded above it.

after desktop
after-no-remote-desktop.png

Row two is five cells. The gap stays in column two โ€” the free column falls off the right, where it means nothing.

before phone (390px, sidebar full-width)
before-no-remote-phone.png
after phone (390px, sidebar full-width)
after-no-remote-phone.png

OpenClaw unavailable

before desktop
before-openclaw-off-desktop.png

An unavailable CLI still renders, dimmed โ€” row one stays six wide.

after desktop
after-openclaw-off-desktop.png

Unchanged: nothing goes ragged, because availability never removes a button.

before phone (390px, sidebar full-width)
before-openclaw-off-phone.png
after phone (390px, sidebar full-width)
after-openclaw-off-phone.png

Method

The real Sidebar is mounted with a stubbed transport and a full CLI catalogue, the create button is clicked, and the .widget.quick element is captured at 2× scale. The phone shots wrap the tree in .app.m-home, because under 720px the sidebar becomes full-width โ€” a phone makes this panel wider, not tighter, and shooting a 390px viewport without that wrapper would have shown the desktop layout by mistake.