Merge pull request 'Add TUI scrolling' (#28) from dev/24-tui-scrolling into v0.3.0

Reviewed-on: https://git.cer.sh/Axodouble/QUptime/pulls/28

Author: Axodouble

CHANGELOG.md

@@ -11,6 +11,11 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - New documented deployment methods for Tailscale and EdgeVPN, with example `docker-compose.yml` files and wrapper scripts in `docker/tailscale/` and `docker/edgevpn/`.
 - New builder command `qu builder`, which generates a standalone HTML alert-template builder
 
+### Changed
+
+- **TUI modals now scroll** when a form is taller than the terminal (e.g. the SMTP "Add alert" form on a short window). The view auto-centres on the focused field and shows `↑/↓ N more` indicators when content is clipped above or below. #24
+- TUI main page no longer overflows on very short terminals — the body shrinks all the way down to a single row instead of pinning to 5.
+
 ## [v0.2.3] — 2026-05-19
 
 ### Changed

internal/tui/forms.go

@@ -108,6 +108,7 @@ type form struct {
 	busy   bool
 	err    string
 	width  int // current terminal width; inputs resize to fill it
+	height int // available content height inside the modal chrome
 
 	// initCmd is the blink Cmd produced by focusing the first field at
 	// construction time. The parent dispatches it via Init() so the
@@ -117,6 +118,10 @@ type form struct {
 	submit func(values []string) tea.Cmd
 }
 
+// modalChromeHeight is the number of vertical rows modalStyle eats
+// around the inner content: 2 border (top+bottom) + 2 padding (top+bottom).
+const modalChromeHeight = 4
+
 // defaultFieldWidth is the fallback input width used before the first
 // WindowSizeMsg has arrived. Once we know the terminal size, inputs
 // grow to fill the available horizontal space.
@@ -215,45 +220,106 @@ func (f *form) Title() string { return f.title }
 func (f *form) Init() tea.Cmd { return f.initCmd }
 
 func (f *form) View() string {
-	var b strings.Builder
-	fmt.Fprintf(&b, "%s\n\n", titleStyle.Render(f.title))
+	lines, focusStart, focusEnd := f.renderLines()
+	if f.height > 0 && len(lines) > f.height {
+		lines = clipAroundFocus(lines, focusStart, focusEnd, f.height)
+	}
+	return strings.Join(lines, "\n")
+}
+
+// renderLines builds the full form view as a slice of terminal rows and
+// reports the [start, end) line range covered by the focused field, so
+// View() can window around it when the form is taller than the modal.
+func (f *form) renderLines() (lines []string, focusStart, focusEnd int) {
+	focusStart, focusEnd = -1, -1
+	lines = append(lines, strings.Split(titleStyle.Render(f.title), "\n")...)
+	lines = append(lines, "")
 	for i, fld := range f.fields {
+		start := len(lines)
 		marker := "  "
 		labelStyle := subtleStyle
 		if i == f.cursor {
 			marker = "▸ "
 			labelStyle = lipgloss.NewStyle().Foreground(colorAccent).Bold(true)
 		}
-		fmt.Fprintf(&b, "%s%s\n", marker, labelStyle.Render(fld.label))
+		lines = append(lines, marker+labelStyle.Render(fld.label))
+		body := "  " + fld.input.View()
 		if fld.multiline {
-			fmt.Fprintf(&b, "%s\n", fld.textarea.View())
-		} else {
-			fmt.Fprintf(&b, "  %s\n", fld.input.View())
+			body = fld.textarea.View()
 		}
+		lines = append(lines, strings.Split(body, "\n")...)
 		if i == f.cursor && fld.hint != "" {
-			fmt.Fprintf(&b, "  %s\n", helpStyle.Render(fld.hint))
+			lines = append(lines, "  "+helpStyle.Render(fld.hint))
 		}
-		b.WriteByte('\n')
+		if i == f.cursor {
+			focusStart, focusEnd = start, len(lines)
+		}
+		lines = append(lines, "")
 	}
 	if f.err != "" {
-		fmt.Fprintf(&b, "%s\n\n", flashErrorStyle.Render("error: "+f.err))
+		lines = append(lines, flashErrorStyle.Render("error: "+f.err), "")
+	}
+	help := "↑↓ field   enter next/submit   esc cancel"
+	if f.cursor < len(f.fields) && f.fields[f.cursor].multiline {
+		help = "tab field   enter newline   shift+enter/ctrl+s submit   esc cancel"
 	}
 	if f.busy {
-		fmt.Fprintf(&b, "%s\n", flashWarnStyle.Render("working…"))
+		lines = append(lines, flashWarnStyle.Render("working…"))
 	} else {
-		help := "↑↓ field   enter next/submit   esc cancel"
-		if f.cursor < len(f.fields) && f.fields[f.cursor].multiline {
-			help = "tab field   enter newline   shift+enter/ctrl+s submit   esc cancel"
-		}
-		fmt.Fprintf(&b, "%s\n", helpStyle.Render(help))
+		lines = append(lines, helpStyle.Render(help))
 	}
-	return b.String()
+	return
+}
+
+// clipAroundFocus returns a maxH-tall window of lines that includes the
+// [focusStart, focusEnd) range. When there is content above or below the
+// window, the boundary lines are replaced with "↑ N more" / "↓ N more"
+// indicators — unless doing so would hide the focused range, in which
+// case the indicator is skipped to keep the cursor visible.
+func clipAroundFocus(lines []string, focusStart, focusEnd, maxH int) []string {
+	n := len(lines)
+	if maxH <= 0 || n <= maxH {
+		return lines
+	}
+	if focusStart < 0 {
+		focusStart, focusEnd = 0, 1
+	}
+	focusH := focusEnd - focusStart
+	if focusH < 1 {
+		focusH = 1
+	}
+	// When the focused field is taller than the available window, pin
+	// the start to the field's label rather than centering — the label
+	// is the most important thing to keep on screen.
+	start := focusStart
+	if focusH < maxH {
+		start = focusStart - (maxH-focusH)/2
+	}
+	if start+maxH > n {
+		start = n - maxH
+	}
+	if start < 0 {
+		start = 0
+	}
+	end := start + maxH
+	out := append([]string(nil), lines[start:end]...)
+	if start > 0 && focusStart > start {
+		out[0] = subtleStyle.Render(fmt.Sprintf("↑ %d more above", start))
+	}
+	if end < n && focusEnd <= end-1 {
+		out[len(out)-1] = subtleStyle.Render(fmt.Sprintf("↓ %d more below", n-end))
+	}
+	return out
 }
 
 func (f *form) Update(msg tea.Msg) (modal, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		f.width = msg.Width
+		f.height = msg.Height - modalChromeHeight
+		if f.height < 1 {
+			f.height = 1
+		}
 		w := fieldWidthFor(msg.Width)
 		for i := range f.fields {
 			f.fields[i].setWidth(w)

internal/tui/tabs.go

@@ -1,6 +1,7 @@
 package tui
 
 import (
+	"strconv"
 	"strings"
 	"time"
 
@@ -133,9 +134,9 @@ func (c *checksTab) SelectedName() string {
 func (c *checksTab) Refresh(st transport.StatusResponse) {
 	rows := make([]table.Row, 0, len(st.Checks))
 	for _, ch := range st.Checks {
-		okTotal := lipgloss.NewStyle().Render("0/0")
+		okTotal := "0/0"
 		if ch.Total > 0 {
-			okTotal = lipgloss.NewStyle().Render(itoa(ch.OKCount) + "/" + itoa(ch.Total))
+			okTotal = strconv.Itoa(ch.OKCount) + "/" + strconv.Itoa(ch.Total)
 		}
 		alerts := strings.Join(ch.Alerts, ",")
 		if alerts == "" {
@@ -255,29 +256,6 @@ func livenessText(live bool) string {
 	return "dead"
 }
 
-func itoa(i int) string {
-	// avoid pulling fmt in the hot path of refresh
-	if i == 0 {
-		return "0"
-	}
-	neg := i < 0
-	if neg {
-		i = -i
-	}
-	var buf [20]byte
-	pos := len(buf)
-	for i > 0 {
-		pos--
-		buf[pos] = byte('0' + i%10)
-		i /= 10
-	}
-	if neg {
-		pos--
-		buf[pos] = '-'
-	}
-	return string(buf[pos:])
-}
-
 func truncate(s string, max int) string {
 	if max <= 0 || len(s) <= max {
 		return s

internal/tui/tui.go

@@ -196,18 +196,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	}
 
 	// Pass through to the active tab so j/k/PgUp/PgDn scroll the table.
-	switch m.active {
-	case tabPeers:
-		_, cmd := m.peers.Update(msg)
-		return m, cmd
-	case tabChecks:
-		_, cmd := m.checks.Update(msg)
-		return m, cmd
-	case tabAlerts:
-		_, cmd := m.alertsT.Update(msg)
-		return m, cmd
-	}
-	return m, nil
+	return m, m.forwardToActiveTab(msg)
 }
 
 func (m model) handleKey(km tea.KeyMsg) (tea.Model, tea.Cmd) {
@@ -220,14 +209,8 @@ func (m model) handleKey(km tea.KeyMsg) (tea.Model, tea.Cmd) {
 	case "shift+tab", "left", "H":
 		m.active = (m.active + 2) % 3
 		return m, tea.ClearScreen
-	case "1":
-		m.active = tabPeers
-		return m, tea.ClearScreen
-	case "2":
-		m.active = tabChecks
-		return m, tea.ClearScreen
-	case "3":
-		m.active = tabAlerts
+	case "1", "2", "3":
+		m.active = tabIndex(km.String()[0] - '1')
 		return m, tea.ClearScreen
 	case "r":
 		m.setFlash("refreshing…", flashInfo)
@@ -253,18 +236,23 @@ func (m model) handleKey(km tea.KeyMsg) (tea.Model, tea.Cmd) {
 	}
 
 	// Forward everything else (arrow keys etc.) to the active tab.
+	return m, m.forwardToActiveTab(km)
+}
+
+// forwardToActiveTab passes msg to whichever tab is currently focused.
+// Used for both arbitrary tea.Msg pass-through (mouse, ticks) and for
+// keys handleKey didn't claim.
+func (m model) forwardToActiveTab(msg tea.Msg) tea.Cmd {
+	var cmd tea.Cmd
 	switch m.active {
 	case tabPeers:
-		_, cmd := m.peers.Update(km)
-		return m, cmd
+		_, cmd = m.peers.Update(msg)
 	case tabChecks:
-		_, cmd := m.checks.Update(km)
-		return m, cmd
+		_, cmd = m.checks.Update(msg)
 	case tabAlerts:
-		_, cmd := m.alertsT.Update(km)
-		return m, cmd
+		_, cmd = m.alertsT.Update(msg)
 	}
-	return m, nil
+	return cmd
 }
 
 // =============================================================
@@ -700,11 +688,15 @@ func (m *model) setFlash(s string, level flashLevel) {
 
 func (m *model) resizeTabs() {
 	// Rows consumed outside the body: header (variable), tabs (1),
-	// body's own rounded border (2), flash (1), help (1).
+	// body's own rounded border (2), flash (1), help (1). On terminals
+	// too small to honor the reservation, shrink the body all the way
+	// down to 1 row rather than letting the page overflow — the table
+	// will collapse to a single visible row but the rest of the chrome
+	// stays on screen.
 	reserved := m.headerHeight() + 5
 	bodyH := m.height - reserved
-	if bodyH < 5 {
-		bodyH = 5
+	if bodyH < 1 {
+		bodyH = 1
 	}
 	bodyW := m.width - 4
 	if bodyW < 20 {