Customizer control for Header Builder: per-slot width/proportions (feature request) #306

Summary

Feature request: allow per-slot (or per-block) control over width/proportions and spacing of Header Builder Main Row blocks.

Users want a way to restore or control the internal proportions of elements placed inside the Main Row without editing CSS. Currently layout proportions are implicitly determined by CSS rules (for example when a column has multiple elements we add cm-header-col--has-multiple and CSS applies flex-basis: 30%).

Customer context

Product area: Header Builder / Customizer
Customer request: a specific setting to control width/height/proportions of the individual blocks in the Main Row so they can restore previous layouts without custom CSS or theme rollbacks.

Transcript source: https://app.crisp.chat/website/dbb04a43-f4b1-4bf2-8ac2-b9aacd3459e1/

Reproduction notes

1. Use the Header Builder and place more than one element in a Main Row column. The theme adds cm-header-col--has-multiple and CSS assigns a fixed flex-basis which changes block sizes.
2. The user cannot directly control that behaviour from the Customizer; there is no per-slot width/height control surfaced.

Proposal

Add a Customizer control (or controls) to tune header block proportions and spacing. Possible approaches:

• Per-row column proportion controls: for each area (top/main/bottom) add a setting that allows selecting relative width split of left/center/right (e.g., 25/50/25, 30/40/30, custom percentages). This maps to flex-basis on the column wrappers and would be the smallest user-facing API.
• Per-slot settings: allow each slot to optionally override its flex-basis (advanced). Keep sane defaults and an option to revert to legacy/fallback behaviour.
• Alternatively, make the cm-header-col--has-multiple rule responsive/flexible (remove hard-coded 30% and use flex: 1 or CSS grid) so adding an element does not enforce unexpected fixed proportions.

Files / lines referenced

• inc/builder-template-tags.php:colormag_render_header_cols() — adds cm-header-col--has-multiple (file:line ~82-85)
• style.css — .cm-header-builder .cm-main-row .cm-header-left-col.cm-header-col--has-multiple { flex-basis: 30%; } (style.css around line ~1080)

Confidence: 65/100 — request is a UX/Customizer enhancement motivated by the current CSS behaviour. Implementation approach can vary; the smallest change is to add a per-row presets control to Customizer and avoid hard-coded flex-basis values.

Source: Crisp conversation