fix(header): right-align clock, date and volume in the top bar

somafm_tui/widgets/header.py

@@ -40,10 +40,10 @@ class HeaderBar(Widget):
         state = app.playing_state
         glyph, colour = state_glyph(state)
 
-        logo_width = max(len(row) for row in LOGO)
-        middle_width = max(len(row) for row in MIDDLE)
+        logo_width = max(cell_len(row) for row in LOGO)
+        middle_width = max(cell_len(row) for row in MIDDLE)
         right = (clock_time(), date_label(), f"vol {app.volume}%")
-        right_width = max(len(item) for item in right)
+        right_width = max(cell_len(item) for item in right)
 
         show_middle = width >= logo_width + middle_width + 8
         show_right = width >= logo_width + right_width + 8
@@ -62,15 +62,25 @@ class HeaderBar(Widget):
                 )
             if show_middle:
                 line.append(" " * 4)
-                line.append(MIDDLE[index], style="dim")
+                middle = MIDDLE[index]
+                line.append(middle, style="dim")
+                # Keep the right block on one column even though the middle
+                # lines differ in length ("SOMA FM RADIO" is shorter than
+                # "LISTENER SUPPORTED").
+                line.append(" " * max(0, middle_width - cell_len(middle)))
             if show_right:
                 used = logo_width
                 if show_middle:
                     used += 4 + middle_width
+                # Right-align the block *and* every item inside it: the clock,
+                # the date and the volume each keep their own length, so pad
+                # the shortest ones instead of left-aligning the whole block.
                 pad = max(1, width - used - right_width)
+                item = right[index]
                 line.append(" " * pad)
+                line.append(" " * max(0, right_width - cell_len(item)))
                 style = "bold" if index == 0 else "dim"
-                line.append(right[index], style=style)
+                line.append(item, style=style)
             lines.append(line)
 
         if height >= 4: