style: align help list rows

auditui/constants.py

@@ -178,25 +178,25 @@ StatsScreen .help_list > ListItem > Label {
 }
 
 #help_container {
-    width: 88%;
+    width: 72%;
-    max-width: 120;
+    max-width: 90;
-    min-width: 48;
+    min-width: 44;
     height: auto;
     max-height: 80%;
     min-height: 14;
     background: #181a2a;
     border: heavy #7aa2f7;
-    padding: 1 2;
+    padding: 1 1;
 }
 
 #help_title {
     width: 100%;
-    height: 3;
+    height: 2;
     text-align: center;
     text-style: bold;
     color: #7aa2f7;
     content-align: center middle;
-    margin-bottom: 1;
+    margin-bottom: 0;
     border-bottom: solid #4b5165;
 }
 
@@ -205,19 +205,21 @@ StatsScreen .help_list > ListItem > Label {
     height: auto;
     padding: 0;
     margin: 0 0 1 0;
+    align: center middle;
 }
 
 .help_list {
     width: 100%;
     height: auto;
     background: transparent;
-    padding: 0 1;
+    padding: 0;
     scrollbar-size: 0 0;
 }
 
 .help_list > ListItem {
     background: #1b1f33;
     padding: 0 1;
+    height: 1;
 }
 
 .help_list > ListItem:hover {
@@ -231,11 +233,11 @@ StatsScreen .help_list > ListItem > Label {
 
 #help_footer {
     width: 100%;
-    height: 3;
+    height: 2;
     text-align: center;
     content-align: center middle;
     color: #b6bfdc;
-    margin-top: 1;
+    margin-top: 0;
     border-top: solid #4b5165;
 }
 

auditui/ui.py

@@ -5,7 +5,7 @@ from datetime import date, datetime
 from typing import Any, Callable, Protocol, TYPE_CHECKING, cast
 
 from textual.app import ComposeResult
-from textual.containers import Container, Horizontal, Vertical
+from textual.containers import Container, Vertical
 from textual.screen import ModalScreen
 from textual.timer import Timer
 from textual.widgets import Input, Label, ListItem, ListView, Static
@@ -69,23 +69,18 @@ class HelpScreen(AppContextMixin, ModalScreen):
         """Create a ListItem for a single binding."""
         key, description = self._parse_binding(binding)
         key_display = self._format_key_display(key)
-        text = f"[bold {KEY_COLOR}]{key_display:>12}[/]  [{DESC_COLOR}]{description}[/]"
+        text = f"[bold {KEY_COLOR}]{key_display:>16}[/]  [{DESC_COLOR}]{description:<25}[/]"
         return ListItem(Label(text))
 
     def compose(self) -> ComposeResult:
         app = self._app()
         bindings = list(app.BINDINGS)
-        mid = (len(bindings) + 1) // 2
 
         with Container(id="help_container"):
-            yield Static("Key Bindings", id="help_title")
+            yield Static("Keybindings", id="help_title")
-            with Horizontal(id="help_content"):
+            with Vertical(id="help_content"):
                 yield ListView(
-                    *[self._make_item(b) for b in bindings[:mid]],
+                    *[self._make_item(b) for b in bindings],
-                    classes="help_list",
-                )
-                yield ListView(
-                    *[self._make_item(b) for b in bindings[mid:]],
                     classes="help_list",
                 )
             yield Static(