style: align help list rows

auditui/__init__.py

@@ -1,3 +1,3 @@
 """Auditui package"""
 
-__version__ = "0.1.3"
+__version__ = "0.1.4"

auditui/app.py

@@ -98,6 +98,7 @@ class Auditui(App):
         table.cursor_type = "row"
         yield table
         yield Static("", id="progress_info")
+        with Horizontal(id="progress_bar_container"):
             yield ProgressBar(id="progress_bar", show_eta=False, show_percentage=False, total=100)
 
     def on_mount(self) -> None:
@@ -525,6 +526,8 @@ class Auditui(App):
 
         progress_info = self.query_one("#progress_info", Static)
         progress_bar = self.query_one("#progress_bar", ProgressBar)
+        progress_bar_container = self.query_one(
+            "#progress_bar_container", Horizontal)
 
         progress_percent = min(100.0, max(
             0.0, (chapter_elapsed / chapter_total) * 100.0))
@@ -534,14 +537,15 @@ class Auditui(App):
         progress_info.update(
             f"{chapter_name} | {chapter_elapsed_str} / {chapter_total_str}")
         progress_info.display = True
-        progress_bar.display = True
+        progress_bar_container.display = True
 
     def _hide_progress(self) -> None:
         """Hide the progress widget."""
         progress_info = self.query_one("#progress_info", Static)
-        progress_bar = self.query_one("#progress_bar", ProgressBar)
+        progress_bar_container = self.query_one(
+            "#progress_bar_container", Horizontal)
         progress_info.display = False
-        progress_bar.display = False
+        progress_bar_container.display = False
 
     def _save_position_periodically(self) -> None:
         """Periodically save playback position."""

auditui/constants.py

@@ -61,8 +61,8 @@ Screen {
 DataTable {
     height: 1fr;
     background: #141622;
-    color: #d6dbf2;
-    border: solid #2b2f45;
+    color: #c7cfe8;
+    border: solid #262a3f;
     scrollbar-size-horizontal: 0;
 }
 
@@ -105,6 +105,14 @@ Static#progress_info {
     text-style: bold;
     margin: 0;
     padding: 0;
+    text-align: center;
+    width: 100%;
+}
+
+#progress_bar_container {
+    align: center middle;
+    width: 100%;
+    height: 1;
 }
 
 ProgressBar#progress_bar {
@@ -112,8 +120,10 @@ ProgressBar#progress_bar {
     background: #10131f;
     border: none;
     margin: 0;
-    padding: 0 1;
-    align: center middle;
+    padding: 0;
+    width: auto;
+    min-width: 40;
+    max-width: 80;
 }
 
 ProgressBar#progress_bar > .progress-bar--track {
@@ -124,21 +134,16 @@ ProgressBar#progress_bar > .progress-bar--bar {
     background: #8bd5ca;
 }
 
-HelpScreen {
+HelpScreen,
+StatsScreen,
+FilterScreen {
     align: center middle;
     background: rgba(0, 0, 0, 0.7);
 }
 
-HelpScreen Static {
-    background: transparent;
-}
-
-StatsScreen {
-    align: center middle;
-    background: rgba(0, 0, 0, 0.7);
-}
-
-StatsScreen Static {
+HelpScreen Static,
+StatsScreen Static,
+FilterScreen Static {
     background: transparent;
 }
 
@@ -173,25 +178,25 @@ StatsScreen .help_list > ListItem > Label {
 }
 
 #help_container {
-    width: 88%;
-    max-width: 120;
-    min-width: 48;
+    width: 72%;
+    max-width: 90;
+    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;
 }
 
@@ -200,19 +205,21 @@ StatsScreen .help_list > ListItem > Label {
     height: auto;
     padding: 0;
     margin: 0 0 1 0;
+    align: center middle;
 }
 
 .help_list {
-    width: 1fr;
+    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 {
@@ -226,23 +233,14 @@ StatsScreen .help_list > ListItem > Label {
 
 #help_footer {
     width: 100%;
-    height: 3;
+    height: 2;
     text-align: center;
     content-align: center middle;
-    color: #bac2de;
-    margin-top: 1;
+    color: #b6bfdc;
+    margin-top: 0;
     border-top: solid #4b5165;
 }
 
-FilterScreen {
-    align: center middle;
-    background: rgba(0, 0, 0, 0.7);
-}
-
-FilterScreen Static {
-    background: transparent;
-}
-
 #filter_container {
     width: 60;
     height: auto;
@@ -271,7 +269,7 @@ FilterScreen Static {
     height: 2;
     text-align: center;
     content-align: center middle;
-    color: #bac2de;
+    color: #b6bfdc;
     margin-top: 1;
 }
 """

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")
-            with Horizontal(id="help_content"):
+            yield Static("Keybindings", id="help_title")
+            with Vertical(id="help_content"):
                 yield ListView(
-                    *[self._make_item(b) for b in bindings[:mid]],
-                    classes="help_list",
-                )
-                yield ListView(
-                    *[self._make_item(b) for b in bindings[mid:]],
+                    *[self._make_item(b) for b in bindings],
                     classes="help_list",
                 )
             yield Static(

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "auditui"
-version = "0.1.3"
+version = "0.1.4"
 description = "An Audible TUI client"
 readme = "README.md"
 requires-python = ">=3.10,<3.13"

uv.lock

@@ -35,7 +35,7 @@ wheels = [
 
 [[package]]
 name = "auditui"
-version = "0.1.2"
+version = "0.1.4"
 source = { editable = "." }
 dependencies = [
     { name = "audible" },