- Header: view toggles (Assets/Preview/Properties/Auto-hide) move to the top bar; progress, the prompt warning and scene actions (rate, upscale, interpolate) move to the row under the toolbar; the timeline head never wraps from 1000px up and never clips its controls. The top bar grows a line instead of spilling when it wraps.
- Kit: every literal pixel size in element CSS is a token (the ratchet test is now zero); Composer's text box follows the viewport; the catalogue shows the component sizes.
- test:viewport adds a fake ComfyUI queue and socket for the render-running state and asserts the header is one row.
- Auto Montage removed (button, window, code, README/docs, tests). Saved projects holding pieces it made still load: the reused flag is kept.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Lane sizes and the window margin become tokens; toolbars wrap by default; windows are capped to the viewport; a ratchet test stops element CSS gaining literal pixel sizes. app/e2e runs the real app in Chromium and Firefox at eight screen sizes (npm run test:viewport). docs/ui-design-guidelines.md gains "Responsive by construction".
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Below 1250px the timeline header and toolbar wrap onto more rows and cut the lanes off at the fixed 340px; give it 360-400px there. Settings rows in a popover (the Sampler) had the stack's 20px gap on top of their own padding.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The ::after spacer plus the body gap added 24px under the last row of every non-flush panel on top of the 16px padding. Padding already clears the end of a scroll; removing it makes bottom clearance 16px everywhere.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The panel-body ::after spacer plus the body gap sat under a body that is a single filler; hide the spacer there so the controls sit 16px above the panel edge.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Modal head/body/foot, button gaps, settings rows, panels and stacks get more room.
Faint and muted text, light-theme accent, warn/good tones and the Render and chip labels now reach 4.5:1.
Accent used as text has its own token. Focus ring is a solid 2px accent ring.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E6LjCrZ8KMcHGZyRWjkPA5
