improved/reworked form alignment

Author: Jannes-Dailidow

ui/tui/models/helpers/form/form.go

@@ -174,7 +174,7 @@ func (f Form[T]) View() string {
 	activeRowHeight := lipgloss.Height(rowViews[activeRowIndex])
 
 	// combine rendered rows and render in limited viewport
-	return util.RenderContentInViewportAligned(
+	return util.RenderContentInViewportAlignY(
 		lipgloss.JoinVertical(lipgloss.Left, rowViews...),
 		f.size.Height,
 		activeRowOffset,

ui/tui/util/keys/common_keys.go

@@ -62,6 +62,31 @@ func Right() key.Binding {
 	)
 }
 
+func UpArrow() key.Binding {
+	return key.NewBinding(
+		key.WithKeys("up"),
+		key.WithHelp("↑", "up"),
+	)
+}
+func DownArrow() key.Binding {
+	return key.NewBinding(
+		key.WithKeys("down"),
+		key.WithHelp("↓", "down"),
+	)
+}
+func LeftArrow() key.Binding {
+	return key.NewBinding(
+		key.WithKeys("left"),
+		key.WithHelp("←", "left"),
+	)
+}
+func RightArrow() key.Binding {
+	return key.NewBinding(
+		key.WithKeys("right"),
+		key.WithHelp("→", "right"),
+	)
+}
+
 func LeftBack() key.Binding {
 	return key.NewBinding(
 		key.WithKeys("left", "backspace", "esc"),

ui/tui/util/size.go

@@ -5,10 +5,9 @@ package util
 
 import tea "github.com/charmbracelet/bubbletea"
 
-type Size struct {
-	Width  int
-	Height int
-}
+type Vec[T comparable] struct{ X, Y T }
+
+type Size struct{ Width, Height int }
 
 func (s *Size) UpdateFromMsg(msg tea.Msg) bool {
 	if msg, ok := msg.(tea.WindowSizeMsg); ok {

ui/tui/util/update_tea_model.go

@@ -4,6 +4,8 @@
 package util
 
 import (
+	"fmt"
+
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/toeirei/keymaster/util/slicest"
 )
@@ -26,8 +28,7 @@ func UpdateTeaModelInplace[M any](msg tea.Msg, model *M) tea.Cmd {
 		return cmd
 	}
 
-	// no supported update method
-	return nil
+	panic(fmt.Sprintf("no supported update method in provided type %T", &model))
 }
 
 func UpdateTeaModelsInplace[M any](msg tea.Msg, models ...*M) tea.Cmd {

ui/tui/util/viewport.go

@@ -8,11 +8,12 @@ import (
 	"strings"
 
 	"github.com/charmbracelet/lipgloss"
+	"github.com/charmbracelet/x/ansi"
 )
 
 func RenderContentInViewportSmooth(
 	content string,
-	viewportHeight,
+	viewportHeight int,
 	targetY int,
 	targetHeight int,
 ) string {
@@ -28,24 +29,115 @@ func RenderContentInViewportSmooth(
 	return strings.Join(lines[offsetY:offsetY+viewportHeight], "\n")
 }
 
-func RenderContentInViewportAligned(
+func RenderContentInViewportAlign(
 	content string,
-	viewportHeight,
+	viewportSize Size,
+	targetPos Vec[int],
+	targetSize Size,
+	align Vec[lipgloss.Position],
+) string {
+	return RenderContentInViewportAlignX(
+		RenderContentInViewportAlignY(
+			content,
+			viewportSize.Height,
+			targetPos.Y,
+			targetSize.Height,
+			align.Y,
+		),
+		viewportSize.Width,
+		targetPos.X,
+		targetSize.Width,
+		align.X,
+	)
+}
+
+func RenderContentInViewportAlignX(
+	content string,
+	viewportWidth int,
+	targetX int,
+	targetWidth int,
+	align lipgloss.Position,
+) string {
+	contentWidth := lipgloss.Width(content)
+
+	// // enlarge content
+	// if contentSize.Width <= viewportSize.Width {
+	// 	content = lipgloss.PlaceHorizontal(viewportSize.Width, lipgloss.Left, content)
+	// }
+
+	// downsize viewport
+	viewportWidth = Clamp(targetWidth, viewportWidth, contentWidth)
+
+	// early exit when content fits into viewport
+	if contentWidth <= viewportWidth {
+		return content
+	}
+
+	// ensure sane values to prevent panics
+	targetWidth = Clamp(1, targetWidth, viewportWidth)
+	targetX = Clamp(0, targetX, contentWidth-targetWidth)
+	align = Clamp(lipgloss.Left, align, lipgloss.Right)
+
+	// calculate offsets
+	offset := Clamp(
+		0,
+		targetX-int(math.Round(float64(viewportWidth-targetWidth)*float64(align))),
+		contentWidth-viewportWidth,
+	)
+
+	// cut X
+	lines := strings.Split(content, "\n")
+	for i := range lines {
+		lines[i] = ansi.TruncateLeft(
+			ansi.Truncate(
+				lines[i],
+				offset+viewportWidth,
+				"",
+			),
+			offset,
+			"",
+		)
+	}
+
+	return strings.Join(lines, "\n")
+}
+
+func RenderContentInViewportAlignY(
+	content string,
+	viewportHeight int,
 	targetY int,
 	targetHeight int,
 	align lipgloss.Position,
 ) string {
 	contentHeight := lipgloss.Height(content)
+
+	// // enlarge content
+	// if contentSize.Height <= viewportSize.Height {
+	// 	content = lipgloss.PlaceHorizontal(viewportSize.Height, lipgloss.Top, content)
+	// }
+
+	// downsize viewport
+	viewportHeight = Clamp(targetHeight, viewportHeight, contentHeight)
+
+	// early exit when content fits into viewport
 	if contentHeight <= viewportHeight {
 		return content
 	}
 
-	offsetY := Clamp(
+	// ensure sane values to prevent panics
+	targetHeight = Clamp(1, targetHeight, viewportHeight)
+	targetY = Clamp(0, targetY, contentHeight-targetHeight)
+	align = Clamp(lipgloss.Top, align, lipgloss.Bottom)
+
+	// calculate offsets
+	offset := Clamp(
 		0,
 		targetY-int(math.Round(float64(viewportHeight-targetHeight)*float64(align))),
 		contentHeight-viewportHeight,
 	)
 
-	lines := strings.Split(content, "\n")
-	return strings.Join(lines[offsetY:offsetY+viewportHeight], "\n")
+	// cut Y
+	lines := strings.Split(content, "\n")[offset : offset+viewportHeight]
+
+	return strings.Join(lines, "\n")
 }

ui/tui/util/viewport_test.go

@@ -0,0 +1,98 @@
+// Copyright (c) 2026 Keymaster Team
+// Keymaster - SSH key management system
+// This source code is licensed under the MIT license found in the LICENSE file.
+package util
+
+import (
+	"strings"
+	"testing"
+
+	"github.com/bobg/go-generics/v4/slices"
+	"github.com/charmbracelet/lipgloss"
+)
+
+// Helper to joinLines lines for cleaner test cases
+func joinLinesSlc(lines []string) string { return strings.Join(lines, "\n") }
+func joinLines(lines ...string) string   { return joinLinesSlc(lines) }
+func joinSlc(lines []string) string      { return strings.Join(lines, "") }
+
+var testRows = [][]string{
+	{"R1C1", "R1C2", "R1C3", "R1C4", "R1C5"},
+	{"R2C1", "R2C2", "R2C3", "R2C4", "R2C5"},
+	{"R3C1", "R3C2", "R3C3", "R3C4", "R3C5"},
+	{"R4C1", "R4C2", "R4C3", "R4C4", "R4C5"},
+	{"R5C1", "R5C2", "R5C3", "R5C4", "R5C5"},
+}
+var testContent = joinLinesSlc(slices.Map(testRows, joinSlc))
+
+func testSubset(from, to Vec[int]) string {
+	strs := make([]string, 0, to.Y-from.Y+1)
+	for i := from.Y - 1; i <= to.Y-1; i++ {
+		strs = append(strs, joinSlc(testRows[i][from.X-1:to.X]))
+	}
+	return joinLinesSlc(strs)
+}
+func newSize(x, y int) Size    { return Size{x * 4, y} }
+func newPos(x, y int) Vec[int] { return Vec[int]{(x - 1) * 4, y - 1} }
+
+func TestRenderContentInViewportAlignXY(t *testing.T) {
+	tests := []struct {
+		name  string
+		vSize Size
+		tPos  Vec[int]
+		tSize Size
+		align Vec[lipgloss.Position]
+		want  string
+	}{
+		{
+			name:  "1x1 cell",
+			vSize: newSize(1, 1),
+			tPos:  newPos(2, 2),
+			tSize: newSize(1, 1),
+			align: Vec[lipgloss.Position]{lipgloss.Center, lipgloss.Center},
+			want:  testSubset(Vec[int]{2, 2}, Vec[int]{2, 2}),
+			// want:  testRows[1][1],
+		},
+		{
+			name:  "inner 3x3 Top Left",
+			vSize: newSize(3, 3),
+			tPos:  newPos(3, 3),
+			tSize: newSize(1, 1),
+			align: Vec[lipgloss.Position]{lipgloss.Top, lipgloss.Left},
+			want:  testSubset(Vec[int]{3, 3}, Vec[int]{5, 5}),
+		},
+		{
+			name:  "inner 3x3 Center Bottom",
+			vSize: newSize(3, 3),
+			tPos:  newPos(3, 3),
+			tSize: newSize(1, 1),
+			align: Vec[lipgloss.Position]{lipgloss.Center, lipgloss.Bottom},
+			want:  testSubset(Vec[int]{2, 1}, Vec[int]{4, 3}),
+		},
+		{
+			name:  "inner 3x3 Right Center",
+			vSize: newSize(3, 3),
+			tPos:  newPos(3, 3),
+			tSize: newSize(1, 1),
+			align: Vec[lipgloss.Position]{lipgloss.Right, lipgloss.Center},
+			want:  testSubset(Vec[int]{1, 2}, Vec[int]{3, 4}),
+		},
+		{
+			name:  "inner 3x3 Center Center",
+			vSize: newSize(3, 3),
+			tPos:  newPos(3, 3),
+			tSize: newSize(1, 1),
+			align: Vec[lipgloss.Position]{lipgloss.Center, lipgloss.Center},
+			want:  testSubset(Vec[int]{2, 2}, Vec[int]{4, 4}),
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := RenderContentInViewportAlign(testContent, tt.vSize, tt.tPos, tt.tSize, tt.align)
+			if got != tt.want {
+				t.Errorf("got:\n%s\nwant:\n%s", got, tt.want)
+			}
+		})
+	}
+}