From 138136e285a4b0a96a8c3a5ad2241d416b310706 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:14:47 +0200
Subject: [PATCH] Fix dropdown item spacing + played-row button alignment

- Selector menu options were bare <button>s with no padding, so the open
  dropdown items were cramped. Add a shared option class (block w-full
  text-left px-4 py-2 + hover), matching the original <a> list items.
- The played-row's relative menu wrapper was a block div, so in the inline-flex
  button group the chevron toggle sat lower than the count button. Make the
  wrapper inline-flex and the group items-stretch so the two buttons align into
  one rounded group again.
- Rebuild base.css for the newly-used utilities.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 common/components/domain.py | 13 ++++++++++++-
 games/static/base.css       | 35 ++++++++++-------------------------
 games/views/game.py         |  6 ++++--
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/common/components/domain.py b/common/components/domain.py
index d9b0d48..e4e0873 100644
--- a/common/components/domain.py
+++ b/common/components/domain.py
@@ -219,6 +219,11 @@ _SELECTOR_TOGGLE_CLASS = (
     "rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 "
     "dark:hover:text-white dark:hover:bg-gray-700 hover:cursor-pointer"
 )
+_SELECTOR_OPTION_CLASS = (
+    "block w-full text-left px-4 py-2 rounded-sm cursor-pointer "
+    "hover:bg-gray-700 hover:text-white dark:hover:bg-gray-700 "
+    "dark:hover:text-white border-0"
+)
 
 
 def GameStatusSelector(game, game_statuses, csrf_token: str) -> Node:
@@ -232,7 +237,12 @@ def GameStatusSelector(game, game_statuses, csrf_token: str) -> Node:
         Li()[
             Element(
                 "button",
-                [("type", "button"), ("data-option", ""), ("data-value", str(value))],
+                [
+                    ("type", "button"),
+                    ("data-option", ""),
+                    ("data-value", str(value)),
+                    ("class", _SELECTOR_OPTION_CLASS),
+                ],
                 GameStatus(status=value, children=[label], display="flex"),
             )
         ]
@@ -279,6 +289,7 @@ def SessionDeviceSelector(session, session_devices, csrf_token: str) -> Node:
                     ("type", "button"),
                     ("data-option", ""),
                     ("data-value", str(device.id)),
+                    ("class", _SELECTOR_OPTION_CLASS),
                 ],
                 children=[device.name],
             )
diff --git a/games/static/base.css b/games/static/base.css
index da52310..4e1ec6a 100644
--- a/games/static/base.css
+++ b/games/static/base.css
@@ -1790,6 +1790,9 @@
   .items-start {
     align-items: flex-start;
   }
+  .items-stretch {
+    align-items: stretch;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1963,17 +1966,10 @@
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-  .rounded-tr-md {
-    border-top-right-radius: var(--radius-md);
-  }
   .rounded-b {
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
   }
-  .rounded-b-md {
-    border-bottom-right-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1982,10 +1978,6 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
-  .border-0\! {
-    border-style: var(--tw-border-style) !important;
-    border-width: 0px !important;
-  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -2774,9 +2766,6 @@
   .line-through {
     text-decoration-line: line-through;
   }
-  .no-underline\! {
-    text-decoration-line: none !important;
-  }
   .underline {
     text-decoration-line: underline;
   }
@@ -3162,6 +3151,13 @@
       }
     }
   }
+  .hover\:bg-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-700);
+      }
+    }
+  }
   .hover\:bg-green-500 {
     &:hover {
       @media (hover: hover) {
@@ -4200,17 +4196,6 @@
       text-underline-offset: 4px;
     }
   }
-  .\[\&_li\:first-of-type_a\]\:rounded-none {
-    & li:first-of-type a {
-      border-radius: 0;
-    }
-  }
-  .\[\&_li\:last-of-type_a\]\:rounded-t-none {
-    & li:last-of-type a {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
   .\[\&_td\:last-child\]\:text-right {
     & td:last-child {
       text-align: right;
diff --git a/games/views/game.py b/games/views/game.py
index 34aad34..a781dc0 100644
--- a/games/views/game.py
+++ b/games/views/game.py
@@ -393,8 +393,10 @@ def _played_row(game: Game, request: HttpRequest) -> Node:
     # 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]
+    toggle_group = Div(class_="relative inline-flex")[toggle, menu]
+    group = Div(class_="inline-flex items-stretch rounded-md shadow-2xs")[
+        count_button, toggle_group
+    ]
     return custom_element(
         "play-event-row",
         PlayEventRowProps(