From 2364d868fa39ddfde89f3fe46545492913c369c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Sat, 13 Jun 2026 22:10:26 +0200
Subject: [PATCH] Fix ported-component styling regressions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  8 ++++++--
 games/views/game.py         | 12 +++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/common/components/domain.py b/common/components/domain.py
index 3baeadb..d9b0d48 100644
--- a/common/components/domain.py
+++ b/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(
diff --git a/games/views/game.py b/games/views/game.py
index 6e7756a..34aad34 100644
--- a/games/views/game.py
+++ b/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")[
-        count_button, toggle
-    ]
+    # Menu is a SIBLING of the toggle (not nested inside it): a <button> may not
+    # 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(