💄 Fix width of shortcut blocks

The left and right shortcut blocks were joined together with fixed
sizes. This meant the width of the left block combined with the width
of the right prevented spare space being allocated to either block.

Using hidden borders also reduced the usable width as the borders are
not rendered but are still part of the calculated width.

internal/ui/shortcut/shortcut.go

@@ -110,11 +110,13 @@ func (m Model) shortcutRow() string {
 }
 
 func (m Model) joinShortcutRow(left, right []string) string {
+	const lineWidth = 80
+
 	hleft := lipgloss.JoinHorizontal(lipgloss.Top, left...)
 	hright := lipgloss.JoinHorizontal(lipgloss.Top, right...)
 
-	bleft := m.styles.blockLeft.Render(hleft)
-	bright := m.styles.blockRight.Render(hright)
+	bleft := lipgloss.PlaceHorizontal(lipgloss.Width(hleft), lipgloss.Left, hleft)
+	bright := lipgloss.PlaceHorizontal(lineWidth-lipgloss.Width(hleft), lipgloss.Right, hright)
 
 	block := lipgloss.JoinHorizontal(lipgloss.Top, bleft, bright)
 

internal/ui/shortcut/style.go

@@ -7,8 +7,6 @@ import (
 
 type Styles struct {
 	boundary     lipgloss.Style
-	blockLeft    lipgloss.Style
-	blockRight   lipgloss.Style
 	columnLeft   lipgloss.Style
 	columnRight  lipgloss.Style
 	key          lipgloss.Style
@@ -25,14 +23,6 @@ func defaultStyles(th theme.Theme) Styles {
 	s.boundary = lipgloss.NewStyle().
 		MarginBottom(1)
 
-	s.blockLeft = lipgloss.NewStyle().
-		Width(50).
-		Align(lipgloss.Left)
-
-	s.blockRight = lipgloss.NewStyle().
-		Width(30).
-		Align(lipgloss.Right)
-
 	s.columnRight = lipgloss.NewStyle().
 		MarginLeft(1)