enhancement
major
minor
major
minor
minor
#29505
Panel header changes height when its toolbar has no commands, so master-detail headers do not line up
Reported from the Consulting application on 8.0.0-alpha7 (react view UI, Issue #94).
.tlPanel__header is a flex row of .tlPanel__title (18px) and .tlPanel__toolbar, with 8px padding above and below and a 1px bottom border. The toolbar has no reserved height, so it is 32px tall while it holds a button and **0px** while it holds none:
| header | toolbar | panel |
| 49px | 32px | a list with "New task" / "New action" |
| 35px | 0px | the detail beside it, nothing selected |
Two consequences, both visible in any master-detail split:
- The two panel headers are **not aligned**. The detail's title sits 7px higher than the list's, along the whole width of the screen, which reads as a rendering fault rather than as a design.
- The detail header **jumps** as soon as something is selected: the selection makes an "Edit" command executable, the toolbar gains a button, and the header grows by 14px, pushing the form down.
It is not specific to one view — every panel whose commands are all null-input-disabled, or which has no commands at all, sits lower than its neighbour.
Suggested fix
Reserve the button height on the toolbar, so the header's height does not depend on whether a command happens to be present:
{{{#!css .tlPanel__toolbar {
min-height: 2rem; /* the height of a toolbar button */
} }}}
A theme token for the button height would be better than the literal 2rem — there is none today, which is why the application-side workaround has to hard-code it.
What we did
Added exactly that rule to the application stylesheet as an interim measure. It should be deleted here once the panel header holds its own height.
Related
- #29503 — .tlResourceCell ships no CSS at all; same area, same kind of missing rule.
Lösung
The toolbar slot of a panel header (.tlPanel__toolbar in tlReactControls.css) reserves the height of one control row, whether or not a command is present. The height is the design system's control-height token --tl-size-control (tl-design-system/tokens.css, 2rem by default and 1.75rem under compact density), the same token a toolbar button is sized by, so the header of a panel without commands is exactly as tall as the header of a panel with commands, and a command becoming executable no longer moves the header.
The stylesheet audit (TestReactStylesheetTokens / ThemeTokenAudit) accepts the tokens declared by the design system's token sheet beside the theme tokens, so a rule of tlReactControls.css may read a --tl-* token.