Align settings row descriptions with grid layout #309

New issue

Closed

opened 2026-06-05 19:42:56 +00:00 by steve · 0 comments

steve commented

2026-06-05 19:42:56 +00:00

Owner

Problem

Setting rows use equal flex growth on .setting-item-info and .setting-item-control, so description text wraps at different column boundaries per row when plugin or schema descriptions vary in length.

Goal

Use a two-column grid so descriptions consume remaining space and controls align consistently, including on narrow settings panels.

Acceptance Criteria

Standard .setting-item rows use grid-template-columns: minmax(0, 1fr) auto.
Schema-driven panels share a control column via subgrid on .workspace-shell__settings-schema-body.
Narrow settings panels stack label/description above controls via container query.
Plugin extension rows and object-map/object-grid rows keep their existing layouts.

Implementation Notes

Updated packages/workspace/src/lib/styles/app.css base .setting-item grid rules.
Added subgrid and container-query stacking in packages/workspace/src/lib/styles/workspace-shell.css.

Suggested Files or Specs To Inspect

Validation Commands

Follow-up Tasks

Implementation Summary

Replaced equal flex columns on .setting-item with a two-track grid (minmax(0,1fr) auto), added schema-body subgrid for aligned control columns, container-query stacking below 32rem, and :empty hiding for descriptions. Validated with workspace check:all and test:e2e:smoke.

## Problem Setting rows use equal flex growth on `.setting-item-info` and `.setting-item-control`, so description text wraps at different column boundaries per row when plugin or schema descriptions vary in length. ## Goal Use a two-column grid so descriptions consume remaining space and controls align consistently, including on narrow settings panels. ## Acceptance Criteria - Standard `.setting-item` rows use `grid-template-columns: minmax(0, 1fr) auto`. - Schema-driven panels share a control column via subgrid on `.workspace-shell__settings-schema-body`. - Narrow settings panels stack label/description above controls via container query. - Plugin extension rows and object-map/object-grid rows keep their existing layouts. ## Implementation Notes - Updated `packages/workspace/src/lib/styles/app.css` base `.setting-item` grid rules. - Added subgrid and container-query stacking in `packages/workspace/src/lib/styles/workspace-shell.css`. ## Suggested Files or Specs To Inspect ## Validation Commands ## Related Issues ## Follow-up Tasks ## Implementation Summary Replaced equal flex columns on .setting-item with a two-track grid (minmax(0,1fr) auto), added schema-body subgrid for aligned control columns, container-query stacking below 32rem, and :empty hiding for descriptions. Validated with workspace check:all and test:e2e:smoke.

steve

2026-06-05 19:42:56 +00:00