Codecourse

The checkbox grid's item size comes from one calculation: container width divided by grid items. Change either side of that equation and the whole layout adjusts. That's the part worth understanding before you touch resize events.

When a layout needs to react to resize, do you reach for a raw resize listener, ResizeObserver directly, or a wrapper like VueUse's useElementBounding? Each gets you the same width value with a different amount of boilerplate.

Once the batch id lives on the model, checking progress is just fetching the batch and reading its state. No custom progress table, no manual percentage math.

A grid built with a fixed item count works fine until someone resizes the window. Then it just gets cut off. The fix isn't a media query — it's recalculating the grid count from the actual container width.

The payoff of moving batch creation into an observer: a server can get created from a form, a seeder, or an admin panel, and the batch fires the same way every time. No duplicated dispatch logic.