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>
This commit is contained in:
2026-06-13 22:14:47 +02:00
parent 2364d868fa
commit 138136e285
3 changed files with 26 additions and 28 deletions
+4 -2
View File
@@ -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(