make full help show in items in vertical order

pkg/tui/components/helpbar.go

@@ -85,53 +85,34 @@ func (h HelpBar) fullHelp() string {
 		return ""
 	}
 
-	keyStyle := lipgloss.NewStyle().
+	keyStyle := lipgloss.NewStyle().Width(fullHelpKeyWidth).Align(lipgloss.Right)
-		Width(fullHelpKeyWidth).
+	descStyle := lipgloss.NewStyle().Width(fullHelpDescWidth)
-		Align(lipgloss.Right)
+	cellStyle := lipgloss.NewStyle().Width(fullHelpKeyWidth + 1 + fullHelpDescWidth)
 
-	descStyle := lipgloss.NewStyle().
+	renderItem := func(item HelpItem) string {
-		Width(fullHelpDescWidth)
-
-	cellStyle := lipgloss.NewStyle().
-		Width(fullHelpKeyWidth + 1 + fullHelpDescWidth)
-
-	renderHelpItem := func(item HelpItem) string {
 		return cellStyle.Render(
-			lipgloss.JoinHorizontal(
+			keyStyle.Render(styles.HighlightKey(item.Key)) + " " + descStyle.Render(item.Desc),
-				lipgloss.Left,
-				keyStyle.Render(styles.HighlightKey(item.Key)),
-				" ",
-				descStyle.Render(item.Desc),
-			),
 		)
 	}
 
-	innerWidth := max(h.width - 2, 1)
+	innerWidth := max(h.width-2, 1)
-
 	cellWidth := fullHelpKeyWidth + 1 + fullHelpDescWidth
-	cols := fitHelpColumns(
+	cols := fitHelpColumns(innerWidth, cellWidth, fullHelpColGap, maxFullHelpCols)
-		innerWidth,
+	rows := (len(h.config.FullItems) + cols - 1) / cols
-		cellWidth,
-		fullHelpColGap,
-		maxFullHelpCols,
-	)
-
 	gap := strings.Repeat(" ", fullHelpColGap)
-	rows := make([]string, 0, (len(h.config.FullItems)+cols-1)/cols)
 
-	for i := 0; i < len(h.config.FullItems); i += cols {
+	var result []string
-		end := min(i + cols, len(h.config.FullItems))
+	for r := range rows {
-
+		var cells []string
-		cells := make([]string, 0, cols)
+		for c := range cols {
-		for _, item := range h.config.FullItems[i:end] {
+			if idx := r + c*rows; idx < len(h.config.FullItems) {
-			cells = append(cells, renderHelpItem(item))
+				cells = append(cells, renderItem(h.config.FullItems[idx]))
+			}
 		}
-
+		result = append(result, joinHorizontalWithGap(cells, gap))
-		rows = append(rows, joinHorizontalWithGap(cells, gap))
 	}
 
-	content := lipgloss.JoinVertical(lipgloss.Left, rows...)
+	content := lipgloss.JoinVertical(lipgloss.Left, result...)
-
 	return lipgloss.NewStyle().
 		Border(lipgloss.Border{Top: "─"}, true, false, false, false).
 		BorderForeground(styles.SecondaryBorder).