Struggling to resize components within TUI

[purpleclay]

I am struggling with resizing. I have read the documentation and looked at examples of how to handle tea.WindowSizeMsg, but whenever I attempt to do this, the elements within my TUI seem to overflow, and the height dimension is no longer honoured.

tui-example.mov

Any help would be greatly appreciated.

I have put together a little example of what I am currently experiencing:

package main

import (
	"log"
	"strings"

	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

var (
	PrimaryColour = lipgloss.Color("#3a1577")

	Banner = lipgloss.NewStyle().Background(PrimaryColour).Height(2)
)

type model struct {
	width int
	text  string
}

func (m model) Init() tea.Cmd {
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	cmds := make([]tea.Cmd, 0)

	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.width = msg.Width
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		}
	}

	return m, tea.Batch(cmds...)
}

func (m model) View() string {
	var b strings.Builder

	b.WriteString(Banner.Copy().Width(m.width).Render(m.text))
	return b.String()
}

func main() {
	m := model{
		text: "hello!",
	}

	if err := tea.NewProgram(m, tea.WithAltScreen()).Start(); err != nil {
		log.Fatal(err)
	}
}

I am running this example on a Mac using iTerm2 with fish shell

[purpleclay]

Any pointers @muesli @meowgorithm ? Thanks

[purpleclay]

Same behaviour when not running in alt screen mode 😞

[purpleclay]

Although I run the same application using Alacritty, I do not get the same behaviour, and rendering works as expected. Are there any known issues with Bubbletea rendering with terminals like iTerm2?

alacritty.resize.mov

[muesli]

This issue comes down to lipgloss filling the available width with spaces, so the background color gets applied. When you resize the terminal, it automatically word-wraps the previous content. It looks like iTerm probably doesn't realize it's wrapping empty cells, while Alacritty does.

This is non-trivial to solve because we can't prevent iTerm from wrapping these characters: this is happening outside of tea's renderer in the terminal itself.

One solution is to fill up the available height with empty lines, but that's a solution that only works in alt-screen.

[purpleclay]

@muesli Is it best to avoid using lipgloss to set a fixed width on text-based elements? Or is this behaviour just heightened by the fact that I am filling with a background colour? I am keen on trying to build a responsive TUI but want to try and avoid these pitfalls.

Or is this just a behaviour that can't be avoided?

[purpleclay]

Thanks for the tip with regards to empty lines and alt-screen 👍

[muesli]

The background color certainly makes it easier to visually glitch in certain terminals. I think we can solve this in Bubble Tea itself for programs running in alt-screen, but there's probably nothing we can do about inline applications. I think this is kinda expected however, and inline solutions are typically for programs of a short-lived nature where you don't expect to be resized during runtime.

[purpleclay]

I appreciate your time in responding. I have learned a lot about BubbleTea in just this short conversation. I agree that in-line programs should take a different approach and wouldn't necessarily be styled like an alt-screen application.

I will examine my existing app and how I can style it with this known behaviour. Regarding potentially solving this in BubbleTea, do I need to capture this in an issue?

[muesli]

Regarding potentially solving this in BubbleTea, do I need to capture this in an issue?

That would be appreciated!