Fix ported-component styling regressions
Two visual regressions from the custom-element port: 1. The played-row nested its dropdown menu (which contains <button> options) inside the toggle <button>. A <button> may not contain another <button>; the HTML parser force-closes the toggle on the nested button, and the source's explicit </div> tags then close ancestors early — ejecting the Purchases/Sessions/etc. sections out of the centered max-w container (they rendered full-width). Make the menu a sibling of the toggle, wrapped in a relative div so it still anchors under the toggle. 2. Both selector toggles dropped the original `flex flex-row gap-4 justify-between items-center` wrapper around their content, so the chevron stacked under the label (the GameStatus label is a display:flex block). Restore the wrapper — chevron sits on the right with proper spacing again. Verified by screenshot: sections back inside the centered container; both dropdowns render correctly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -248,7 +248,9 @@ def GameStatusSelector(game, game_statuses, csrf_token: str) -> Node:
|
||||
toggle = Element(
|
||||
"button",
|
||||
[("type", "button"), ("data-toggle", ""), ("class", _SELECTOR_TOGGLE_CLASS)],
|
||||
[current_label, Icon("arrowdown")],
|
||||
Span(class_="flex flex-row gap-4 justify-between items-center")[
|
||||
current_label, Icon("arrowdown")
|
||||
],
|
||||
)
|
||||
menu = Div(data_menu="", hidden=True, class_=_SELECTOR_MENU_CLASS)[Ul()[*options]]
|
||||
dropdown = Div(
|
||||
@@ -286,7 +288,9 @@ def SessionDeviceSelector(session, session_devices, csrf_token: str) -> Node:
|
||||
toggle = Element(
|
||||
"button",
|
||||
[("type", "button"), ("data-toggle", ""), ("class", _SELECTOR_TOGGLE_CLASS)],
|
||||
[Span(data_label="")[current_name], Icon("arrowdown")],
|
||||
Span(class_="flex flex-row gap-4 justify-between items-center")[
|
||||
Span(data_label="")[current_name], Icon("arrowdown")
|
||||
],
|
||||
)
|
||||
menu = Div(data_menu="", hidden=True, class_=_SELECTOR_MENU_CLASS)[Ul()[*options]]
|
||||
dropdown = Div(
|
||||
|
||||
Reference in New Issue
Block a user