decocms-home-widgets

Make the widget root fill the tile with flex h-full min-h-0 flex-col, put long lists in a flex-1 min-h-0 overflow-y-auto region, and switch layouts based on tile width measured with a ResizeObserver. Register it via a tool _meta.ui.resourceUri, a resource, a vite entry, and an HTML file.

Wire five points: a resource URI constant, a tool returning data with _meta.ui.resourceUri and readOnlyHint annotation, a createMcpAppResource entry added to server resources, a vite build entry in MCP_APP_ENTRIES, and an HTML file loading the React component.

The home tile uses overflow-hidden, so content taller than the tile is clipped unless you add an internal scroll region. Use flex-1 min-h-0 overflow-y-auto on the list container; without min-h-0 the flex child refuses to shrink and scrolling never engages.

No, media queries and Tailwind responsive prefixes react to the viewport, not the tile. Measure the tile element with a ResizeObserver hook, or use Tailwind v4 container queries by marking the root as a container.

Users resize tiles on a grid up to 4 columns by 5 rows, roughly 316px per column and 100px per row, from about 282×166px minimum up to 1256×492px. There is no API to declare a default size, so design for the full range.