1
0
mirror of https://github.com/tw93/Mole.git synced 2026-03-24 15:10:08 +00:00

fix(status): resolve layout issue when stretching terminal window (#467)

When the terminal is stretched wide, the header info line may wrap to
multiple lines but the mole position was calculated independently based
on terminal width, causing vertical misalignment.

Separate header and mole rendering so mole always appears on dedicated
lines below the header regardless of terminal width.
This commit is contained in:
tw93
2026-02-16 19:07:42 +08:00
parent abd9791cd7
commit 8e8059b0aa
2 changed files with 21 additions and 16 deletions

View File

@@ -139,7 +139,7 @@ func (m model) View() string {
return "Loading..." return "Loading..."
} }
header := renderHeader(m.metrics, m.errMessage, m.animFrame, m.width, m.catHidden) header, mole := renderHeader(m.metrics, m.errMessage, m.animFrame, m.width, m.catHidden)
cardWidth := 0 cardWidth := 0
if m.width > 80 { if m.width > 80 {
cardWidth = max(24, m.width/2-4) cardWidth = max(24, m.width/2-4)
@@ -154,20 +154,25 @@ func (m model) View() string {
} }
rendered = append(rendered, renderCard(c, cardWidth, 0)) rendered = append(rendered, renderCard(c, cardWidth, 0))
} }
result := header + "\n" + lipgloss.JoinVertical(lipgloss.Left, rendered...) // Combine header, mole, and cards with consistent spacing
// Add extra newline if cat is hidden for better spacing var content []string
if m.catHidden { content = append(content, header)
result = header + "\n\n" + lipgloss.JoinVertical(lipgloss.Left, rendered...) if mole != "" {
content = append(content, mole)
} }
return result content = append(content, lipgloss.JoinVertical(lipgloss.Left, rendered...))
return lipgloss.JoinVertical(lipgloss.Left, content...)
} }
twoCol := renderTwoColumns(cards, m.width) twoCol := renderTwoColumns(cards, m.width)
// Add extra newline if cat is hidden for better spacing // Combine header, mole, and cards with consistent spacing
if m.catHidden { var content []string
return header + "\n\n" + twoCol content = append(content, header)
if mole != "" {
content = append(content, mole)
} }
return header + "\n" + twoCol content = append(content, twoCol)
return lipgloss.JoinVertical(lipgloss.Left, content...)
} }
func (m model) collectCmd() tea.Cmd { func (m model) collectCmd() tea.Cmd {

View File

@@ -130,7 +130,7 @@ type cardData struct {
lines []string lines []string
} }
func renderHeader(m MetricsSnapshot, errMsg string, animFrame int, termWidth int, catHidden bool) string { func renderHeader(m MetricsSnapshot, errMsg string, animFrame int, termWidth int, catHidden bool) (string, string) {
title := titleStyle.Render("Status") title := titleStyle.Render("Status")
scoreStyle := getScoreStyle(m.HealthScore) scoreStyle := getScoreStyle(m.HealthScore)
@@ -171,7 +171,7 @@ func renderHeader(m MetricsSnapshot, errMsg string, animFrame int, termWidth int
headerLine := title + " " + scoreText + " " + strings.Join(infoParts, " · ") headerLine := title + " " + scoreText + " " + strings.Join(infoParts, " · ")
// Show cat unless hidden // Show cat unless hidden - render mole centered below header
var mole string var mole string
if !catHidden { if !catHidden {
mole = getMoleFrame(animFrame, termWidth) mole = getMoleFrame(animFrame, termWidth)
@@ -179,14 +179,14 @@ func renderHeader(m MetricsSnapshot, errMsg string, animFrame int, termWidth int
if errMsg != "" { if errMsg != "" {
if mole == "" { if mole == "" {
return lipgloss.JoinVertical(lipgloss.Left, headerLine, "", dangerStyle.Render("ERROR: "+errMsg), "") return lipgloss.JoinVertical(lipgloss.Left, headerLine, "", dangerStyle.Render("ERROR: "+errMsg)), ""
} }
return lipgloss.JoinVertical(lipgloss.Left, headerLine, "", mole, dangerStyle.Render("ERROR: "+errMsg), "") return lipgloss.JoinVertical(lipgloss.Left, headerLine, "", mole, dangerStyle.Render("ERROR: "+errMsg)), mole
} }
if mole == "" { if mole == "" {
return headerLine return headerLine, ""
} }
return headerLine + "\n" + mole return headerLine, mole
} }
func getScoreStyle(score int) lipgloss.Style { func getScoreStyle(score int) lipgloss.Style {