Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

artifacts on terminal resize #121

Open
dh185221 opened this issue Jul 13, 2022 · 8 comments
Open

artifacts on terminal resize #121

dh185221 opened this issue Jul 13, 2022 · 8 comments
Assignees

Comments

@dh185221
Copy link

Hi, thanks for the great library!

I've noticed that when using flex columns if I resize my terminal then some table artifacts appear on the screen. Any idea on how to clear this out when the terminal window resizes?

image

After a screen resize:

image

@Evertras
Copy link
Owner

Hello! Sorry about a very slow response, I missed the notification for this.

This is caused because of the ordering of events/draws. The screen is resized, and the view is redrawn -- but the view is being redrawn before the screen resize event is received/processed. I don't know if this is deeper in Bubble Tea itself or if it's something in your code, but I've had troubles with screen resizes as well. The easiest fix is to use the 'full screen' mode with the alternate buffer as in this example: https://github.com/charmbracelet/bubbletea/blob/master/examples/fullscreen/main.go#L19

I'm not sure if there's a deeper fix that can be done on the Bubble Table side.

@Evertras Evertras self-assigned this Jul 20, 2022
@Evertras
Copy link
Owner

Potentially related: charmbracelet/bubbletea#377

@dh185221
Copy link
Author

Hi, thanks for the response. Could this also be related to flex columns? When I run the bubble-table flex example I can see the screen artifacts even when using teat.WithAltScreen()

@Evertras
Copy link
Owner

Odd... I can definitely reproduce the artifacts when I run it without the alt screen, but I cannot reproduce with the alt screen. 🤔

I can reproduce the artifacts generally if I do this:

func (m Model) View() string {
   return "Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooo"
}

Then resizing the window until the width is smaller than the text creates artifacts the same as the table. So unfortunately I'm not sure if this is something that the table itself can fix.

@PrimalPimmy
Copy link

Hmmm it still seems like an issue
image

I'll try to look into this if I get the time

@PrimalPimmy
Copy link

func (m *Model) recalculateTable() {
m.flexTable = m.flexTable.WithTargetWidth(m.totalWidth - m.totalMargin)
}

Maybe if we could have a rigid height of the table as well like how width is done there? Something that is comparable to msg.Height of bubbletea I suppose

@Evertras
Copy link
Owner

It's less about the height of the table in this case, and more about how Bubble Tea itself renders text wrapping and leaves behind artifacts when it tries to redraw outside of the alt screen. Having a target height of the table would still leave the artifacts, since nothing about the actual text rendering would be changing.

After checking the link above it looks like this was actually fixed on their end: charmbracelet/bubbletea#297 + charmbracelet/bubbletea#533

So maybe there's some updates that need to happen here to incorporate the change. I'll have to play a bit when I get some time.

@PrimalPimmy
Copy link

I seem to have the workaround by making a lipgloss style like lipgloss.NewStyle().Height(m.height).MaxHeight(m.height) and then rendering the table and now it doesn't seem to break for me :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants