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>

common/components/domain.py

@@ -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(

games/views/game.py

@@ -386,13 +386,15 @@ def _played_row(game: Game, request: HttpRequest) -> Node:
         [
             ("type", "button"),
             ("data-toggle", ""),
-            ("class", _PLAYED_BTN + " rounded-e-lg relative"),
+            ("class", _PLAYED_BTN + " rounded-e-lg"),
         ],
-        [Icon("arrowdown"), menu],
+        [Icon("arrowdown")],
     )
-    group = Div(class_="inline-flex rounded-md shadow-2xs relative")[
+    # Menu is a SIBLING of the toggle (not nested inside it): a <button> may not
-        count_button, toggle
+    # contain another <button>, and that invalid nesting makes the HTML parser
-    ]
+    # close ancestors early, ejecting later page sections from their container.
+    toggle_group = Div(class_="relative")[toggle, menu]
+    group = Div(class_="inline-flex rounded-md shadow-2xs")[count_button, toggle_group]
     return custom_element(
         "play-event-row",
         PlayEventRowProps(