The tsx uses a switch(true) and the order is the design: customTrayContent.header → an active sub-tab → a selected vehicle → the common logo-and-name. So a selected vehicle outranks the dealer's logo, and a custom header outranks everything. Only the vehicle case changes the box — 80px tall with padding-left: 0 — and it is the one place in the widget where chrome grows to fit content. The others are all 48px with 0 8px padding, --white, and a 0 0 16px rgba(30,30,30,0.16) shadow.

A Stack direction="row" gap={8} alignItems="center" holding an inner content Stack at flex: 1 plus the close button. The content Stack carries min-width: 0; overflow: hidden and the close button flex-shrink: 0, which together mean a long dealership name truncates instead of pushing the close button off the edge — the last row above shows it. The logo is height 100% capped at max-height 32px / max-width 132px with object-fit: contain, and its src falls back from display.header.logo to the dealership's own logoUrl, because the website usually sets the logo separately from the widget config. The name is an h5 at flex 1 and prefers the signed-in customer's full name over the configured name over the dealership name. Close is a gray-2 times IconButton and fires an analytics event alongside the toggle.

The vehicle variant renders the real SelectedVehicle in row mode with shortDescription, a price label and the swap action — and the two components are designed together: SelectedVehicle's row image caps at 80px with a source comment reading "Tray header height", and the header removes its own padding-left so the 104px photo well sits flush against the tray edge. The sub-tab variant renders TrayHeaderGoBack: a gray-2 angle-left IconButton plus an h5 title at flex 1, with no stylesheet of its own. Both are mirrored here; nothing on this card is a stand-in.