Make main menu responsive: vertical layout on narrow screens

- Below 100 cols: stack logo on top, menu below (vertical)
- Below 48 cols (~290px): hide logo entirely, show only menu
- 100+ cols: original side-by-side horizontal layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-07 01:08:15 +02:00
parent 139ea3149c
commit 3292575233

View File

@@ -57,15 +57,21 @@ class MainMenuScreen(Screen):
yield Footer() yield Footer()
def on_mount(self) -> None: def on_mount(self) -> None:
self._update_logo_visibility() self._update_layout()
self.query_one("#menu-list", OptionList).focus() self.query_one("#menu-list", OptionList).focus()
def on_resize(self) -> None: def on_resize(self) -> None:
self._update_logo_visibility() self._update_layout()
def _update_logo_visibility(self) -> None: def _update_layout(self) -> None:
width = self.app.size.width
logo = self.query_one("#logo") logo = self.query_one("#logo")
logo.display = self.app.size.width >= 80 layout = self.query_one("#main-layout")
logo.display = width >= 48
if width < 100:
layout.styles.layout = "vertical"
else:
layout.styles.layout = "horizontal"
def on_option_list_option_selected(self, event: OptionList.OptionSelected) -> None: def on_option_list_option_selected(self, event: OptionList.OptionSelected) -> None:
option_id = event.option.id option_id = event.option.id