From 9c27901c8ec466f02cab21a5dd24f11bd9b573c3 Mon Sep 17 00:00:00 2001
From: Grok <grok@x.ai>
Date: Sat, 6 Jun 2026 14:56:54 +0100
Subject: [PATCH] ui: fix chopped BASE button border and mismatched keypad
 background

Root cause: rowBase was much narrower than the other rows. When we did
Width(dispW).Align(Center).Render(rawGrid) the vertical join produced
a non-rectangular block, so the panel's bottom border was drawn around
the centered narrow line (chopped + shifted under BASE) and the bg 234
had large empty side regions on the bottom row.

Fix:
- Compute fullRowWidth from a complete row.
- Render the BASE key centered inside a string of that exact width.
- Now rawGrid is a true rectangle (all 5 rows same width).
- Render the backing panel *tightly* to rawGrid first (no forced width).
- Then center the resulting compact panel under the display with
  Width(dispW).Align(Center).

Result:
- Clean, straight bottom border under the BASE button.
- The black keypad background now exactly matches the bounding box
  of the actual keys (including the centered BASE row).
- No more dangling empty black space on the sides at the bottom.

The rest of the tactile key styles, per-key pressed flash, and wide
integrated display row are unchanged.
---
 internal/ui/ui.go | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/internal/ui/ui.go b/internal/ui/ui.go
index 05061e8..64e9c5c 100644
--- a/internal/ui/ui.go
+++ b/internal/ui/ui.go
@@ -255,21 +255,36 @@ func (a *App) View() string {
 	row2 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("4"), spacer, makeKey("5"), spacer, makeKey("6"), spacer, makeKey("*"), spacer, makeKey("C"))
 	row3 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("1"), spacer, makeKey("2"), spacer, makeKey("3"), spacer, makeKey("-"), spacer, makeKey("AC"))
 	row4 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("0"), spacer, makeKey("."), spacer, makeKey("+/-"), spacer, makeKey("+"), spacer, makeKey("="))
-	rowBase := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("BASE"))
 
-	// Compact grid of keys
-	rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, rowBase)
+	// Make the BASE row the same width as the other rows so the vertical join
+	// produces a clean rectangle. This fixes the chopped bottom border on BASE
+	// and makes the backing panel dimensions match the actual keypad content.
+	fullRowWidth := lipgloss.Width(row1)
+	baseOnly := makeKey("BASE")
+	baseRow := lipgloss.NewStyle().
+		Width(fullRowWidth).
+		Align(lipgloss.Center).
+		Render(baseOnly)
 
-	// Keypad backing panel: gives the whole grid a "calculator faceplate" look.
-	// Darker background, subtle border, padding. Centered under the wide display.
+	// Compact grid of keys — now every row has identical width.
+	rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, baseRow)
+
+	// Keypad backing panel sized *tightly* to the (now rectangular) grid content.
+	// Then we center the whole panel under the display. This makes the black
+	// background exactly match the keypad's bounding box instead of having
+	// dangling empty space on the sides of the BASE row.
 	keypad := lipgloss.NewStyle().
 		Border(lipgloss.NormalBorder()).
 		BorderForeground(lipgloss.Color("238")).
 		Background(lipgloss.Color("234")).
 		Padding(1, 2).
+		Render(rawGrid)
+
+	// Center the compact keypad panel under the wide display row.
+	keypad = lipgloss.NewStyle().
 		Width(dispW).
 		Align(lipgloss.Center).
-		Render(rawGrid)
+		Render(keypad)
 
 	// Hint (minimal, non-wrapping, like gostations final player)
 	hint := lipgloss.NewStyle().Faint(true).Render("Tab:BASE  0-9 . = + - * / m:MOD  c:C  ac:AC  q:quit")