Pager overlaps content with other component

[ajayd-san]

Hey, I'm making a TUI tool to manage docker objects using bubble tea, and have been a lot of fun doing it!

I use the list and viewport components to display a list of containers and the selected container's logs respectively.
However, I've noticed sometimes when I scroll the pager component, the content from the viewport displays over my list component.

Like so:

The code I'm using for my pager, is the modified version of the pager example:

func (m LogsPagerModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {

	var (
		cmd  tea.Cmd
		cmds []tea.Cmd
	)

	switch msg := msg.(type) {
	case tea.WindowSizeMsg:

		if !m.ready {
			m.viewport = viewport.New(moreInfoStyle.GetWidth()-2, moreInfoStyle.GetHeight()-2)


			m.ready = true

		} else {
                        //moreInfoStyle dimensions could change 
			m.viewport.Width = moreInfoStyle.GetWidth() - 2
			m.viewport.Height = moreInfoStyle.GetHeight() - 2
		}

	case LogTick:
		m.viewport.SetContent(m.content.String())
		cmds = append(cmds, logTicker())
	}

	// Handle keyboard and mouse events in the viewport
	m.viewport, cmd = m.viewport.Update(msg)
	cmds = append(cmds, cmd)

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

func (m LogsPagerModel) View() string {
	if !m.ready {
		return "\n  Initializing..."
	}
	return fmt.Sprintf("%s", m.viewport.View())
}

I'm down to provide any more info as required.

Any help will be appreciated, thanks

[bashbunni]

Hey, we don't support compositing yet in Bubble Tea. There is however an open PR that has been quite well received that might be able to provide you with this feature charmbracelet/lipgloss#102