Display issue when line content is greater than terminal width about bubbletea HOT 4 CLOSED

Hi! Bubble Tea checks the window size for you, but it's your responsibility to wrap or trim your lines. Listen for tea.WindowSizeMsg in Update and then trim or wrap your strings accordingly. I recommend the reflow package for doing word wrapping as it works nicely with ANSI-formatted strings. Note that WindowSizeMsg is sent before the first render and then again every resize.

So in update:

switch msg := msg.(type) {
case tea.WindowSizeMsg:
    model.width = msg.width
    model.height = msg.height // height is available too
}

And then in your view:

import "github.com/muesli/reflow/wordwrap"

func (m model) View() string {
    return wordwrap.String(m.bigLongString, m.width)
}

from bubbletea.

Nice ! I didn't know about WindowSizeMsg, it's really cool!
And I will follow your advice for the maximum width 👍
Thanks mate!

from bubbletea.

Hey @meowgorithm, I have an exact same issue but for terminal height instead. I fill a bytes.Buffer that exceeds my terminal height and have some overlapping, overdrawing issues. Should I file a new issue for this? Display issue when line content is greater than terminal height

from bubbletea.

Also, I personally like to set a max width when word wrapping for readability, so I'd probably do something like:

const maxWidth = 80

func (m model) View() string {
    return wordwrap.String(m.bigLongString, min(m.width, maxWidth))
}

func min(a, b int) int {
    if a < b {
        return a
    }
    return b
}

from bubbletea.