Inlining multiple styles

[parama47]

I'm trying to render a single line string where a specific part has a different style based on a value in my Bubbletea model. I've tried various combinations of (lipgloss) .Inline(), .Sprintf(), .StyleRunes(), and fmt.Sprintf(), but the Vol %d bit always renders on a line below. The string is [MUTED] Vol %d, where 'muted' is different colors depending on model state. I've put the code for that entire section below since I'm not sure if I'm doing something else that's causing the problem.

...
	// ── FOOTER ───────────────────────────────────────────────────────────────
	bitrate := m.headers["Br"]
	if len(bitrate) == 0 {
		bitrate = "Unknown"
	}
	
	audioInfo := fmt.Sprintf("%s %s  //  Ch: %d  SR: %6d Hz",
		m.audioInfo.Format,
		bitrate + " kbps",
		m.audioInfo.Channels,
		m.audioInfo.SampleRate,
	)

	// ---------------section I've changed starts here-------------
	
	volStr := fmt.Sprintf("[MUTED]  Vol %d", m.volume.current)

	if m.volume.muted {
		volStr = lipgloss.StyleRunes(volStr, []int{0,1,2,3,4,5,6}, m.theme.title, m.theme.text) //
	} else {
		volStr = lipgloss.StyleRunes(volStr, []int{0,1,2,3,4,5,6}, m.theme.text.Faint(true), m.theme.text)
	}
	
	// ---------------stops here---------------
	
	footerLeft := "[/] URL  [m] mute  [Down/Up] volume  [q] quit"
	footerRight := audioInfo + "  " + volStr
	var leftStyle, rightStyle lipgloss.Style
	
	if lipgloss.Width(footerLeft) <= m.width/2 {
		leftStyle = lipgloss.NewStyle().Width(m.width/2)
		rightStyle = lipgloss.NewStyle().
			Width(m.width - m.width/2)
		
		footer := lipgloss.JoinHorizontal(lipgloss.Top,
			leftStyle.Render(footerLeft),
			rightStyle.Align(lipgloss.Right).Render(footerRight),
		)
		sections = append(sections, footer)
	} else {
		leftStyle = lipgloss.NewStyle().Width(m.width)
		rightStyle = lipgloss.NewStyle().Width(m.width)

		sections = append(sections, leftStyle.Render(footerLeft), rightStyle.Render(footerRight))
	}

	// Create full screen
	screen := lipgloss.JoinVertical(lipgloss.Left, sections...)
	v := tea.NewView(m.theme.width.Render(screen))
	v.AltScreen = true
	return v
}

[eben-vranken]

It's not the styling, it's the right column width.

gorightStyle = lipgloss.NewStyle().Width(m.width - m.width/2)
rightStyle.Align(lipgloss.Right).Render(footerRight)

When a style has a Width set and the content is wider, lipgloss word-wraps instead of truncating. Your footer Right (audioInfo + " " + volStr) is ~55 cells, but you pin it to m.width/2. On any terminal under ~110 cols it overflows, wraps at the last space, and Vol 42 drops down.

Confirm it: compare lipgloss.Width(footerRight) to m.width - m.width/2 before rendering. If the first is bigger, that's the wrap.

Fix: size the right column to its actual content, give the left the rest.go

rightW := lipgloss.Width(footerRight)
leftW := m.width - rightW

if leftW >= lipgloss.Width(footerLeft) {
    footer := lipgloss.JoinHorizontal(lipgloss.Top,
        lipgloss.NewStyle().Width(leftW).Render(footerLeft),
        lipgloss.NewStyle().Width(rightW).Align(lipgloss.Right).Render(footerRight),
    )
    sections = append(sections, footer)
} else {
    sections = append(sections,
        lipgloss.NewStyle().Width(m.width).Render(footerLeft),
        lipgloss.NewStyle().Width(m.width).Align(lipgloss.Right).Render(footerRight),
    )
}