Is your feature request related to a problem? Please describe.
UX has recently standardized table control heights (bulk action buttons, group-by buttons, filter inputs) to 32px. Extensions that place custom filter controls — such as LabeledSelect dropdowns — above tables need a way to match this height. Currently LabeledSelect only renders at the default 40px unlabeled height, with no way to opt into a smaller size.
Describe the solution you'd like
Add a size prop to LabeledSelect accepting 'small' | 'medium' | 'large' (default 'large'). When size="medium" is used in no-label mode, the component renders at 32px height with properly centered text and chevron. The size prop needs only apply in no-label mode to support current UX usage — labeled mode height is driven by a different layout mechanism and likely requires a full component rework.
Describe alternatives you've considered
Extensions could override the height via scoped CSS in their own components, but this is fragile — it requires deep knowledge of the internal vue-select DOM structure and duplicating the same set of overrides (toggle height, icon centering, margin resets) across every extension that needs the smaller size. Centralizing it in LabeledSelect is cleaner.
Additional context
This change was driven by the table action resize work in the dashboard (#18109). The security-ui-exts repo uses custom filter rows containing LabeledSelect above tables in the Vulnerability Scanner and needs to align with the new 32px standard.
Is your feature request related to a problem? Please describe.
UX has recently standardized table control heights (bulk action buttons, group-by buttons, filter inputs) to 32px. Extensions that place custom filter controls — such as
LabeledSelectdropdowns — above tables need a way to match this height. CurrentlyLabeledSelectonly renders at the default 40px unlabeled height, with no way to opt into a smaller size.Describe the solution you'd like
Add a
sizeprop to LabeledSelect accepting'small' | 'medium' | 'large'(default'large'). Whensize="medium"is used in no-label mode, the component renders at 32px height with properly centered text and chevron. The size prop needs only apply in no-label mode to support current UX usage — labeled mode height is driven by a different layout mechanism and likely requires a full component rework.Describe alternatives you've considered
Extensions could override the height via scoped CSS in their own components, but this is fragile — it requires deep knowledge of the internal vue-select DOM structure and duplicating the same set of overrides (toggle height, icon centering, margin resets) across every extension that needs the smaller size. Centralizing it in
LabeledSelectis cleaner.Additional context
This change was driven by the table action resize work in the dashboard (#18109). The security-ui-exts repo uses custom filter rows containing
LabeledSelectabove tables in the Vulnerability Scanner and needs to align with the new 32px standard.