Layout & edit mode

Every widget on a butter dashboard lives on a shared grid: twelve columns wide, fixed 80-pixel rows, sixteen-pixel margins between cells. The grid never compromises on responsiveness — it just stretches to whatever width Chrome gives it — and the snap behaviour keeps the dashboard tidy without making layout feel rigid.

The grid

• Twelve columns. Widget widths snap to divisors of twelve — 3, 4, 6, 8, 9, or 12. That gives you four-up rows (3 + 3 + 3 + 3), three-up (4 + 4 + 4), two-up (6 + 6 or 4 + 8), and anything in between, without weird half-snaps.
• 80-pixel rows. Heights snap to row multiples. Most widgets ship with a minimum row count (Pomodoro needs four rows to breathe; the Clock is fine in two) and an optional maximum where stretching further wouldn't help.
• No row cap. The dashboard scrolls vertically — drop twenty widgets if you want a long page.
• Free tier caps at six widgets total. Pro removes the cap entirely. The cap is a UX gate, not a security boundary — it sits on top of an otherwise open grid.

Edit mode

Edit mode is a place you visit, not the default. Outside edit mode the dashboard is read-only — drag handles are hidden, settings gears don't appear, and right-click falls through to Chrome's native menu. Enter edit mode and the whole grid lights up.

Three ways in:

• Press E . The fastest. Press again — or Esc — to leave.
• Click the pencil icon in the header, top-right of the page. Becomes a check while editing.
• From the welcome screen, after loading the starter or adding your first widget.

Edit mode is "sticky": every drag, resize, settings change, or widget add / remove autosaves immediately. There's no undo button — the only safety net is the export file you can take from Settings → Layout at any time.

What you can do in edit mode

• Drag. Grab any widget by its title bar and move it. The grid shows a faint placeholder of where it'll land; release to drop. Widgets stay inside the grid's right and bottom edges while dragging — no visual escape past the canvas.
• Resize. Three handles per card: the bottom-right corner (both axes), the right edge (width only), the bottom edge (height only). Width snaps to a divisor of twelve; height snaps in 80-pixel row increments and respects each widget's min / max.
• Settings. A small gear icon appears on each widget's title bar when the widget has a settings form. Click it, or right-click anywhere on the widget body — same modal either way.
• Remove. An X icon on the right side of each title bar. Drops the widget and any storage it owned (for example, a Todo widget's tasks). No confirmation prompt — the export file is the safety net.
• Add. Press A or click the plus icon in the header. The picker shows all fourteen widgets with a search field; the chosen one drops in at the bottom of your dashboard.

Keyboard nav (the real reason edit mode exists)

Once you're in edit mode you can do everything without leaving the home row. Tab to a widget — its border lights up — and:

• ↑ ↓ ← → — nudge the widget one grid cell in that direction.
• Shift +arrows — resize the widget by one cell.
• Tab again — focus the next widget.

The card you just touched gets a brief outline pulse — confirmation that you moved this one, useful when you're dragging or nudging things on a 4K monitor with a busy dashboard.

Subtleties worth knowing

• The widget body stays interactive in edit mode. Title-bar buttons (settings / remove) and the drag handle take over the header, but the content inside each card keeps working — you can drag the Pomodoro while it's running and the timer keeps draining. Only the chrome around each card responds to edit mode.
• Right-click does different things outside edit mode. Outside edit mode it's the native browser context menu (Inspect, etc.). Inside edit mode it opens the widget's settings.
• Each widget gets its own settings. Drop two of the same widget and they have independent settings — and, where applicable, independent storage (Todo content, Scratchpad text). Each is identified by its instance ID, a short nanoid generated on add.
• Newly-added widgets animate in. Widgets present at first paint render instantly; ones you add during a session get a brief mount animation so you can see where they landed.

---