charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.56k stars 264 forks source link

List : list panel pushed into title/status panels by padding on items #503

Open rorycl opened 7 months ago

rorycl commented 7 months ago

Describe the bug Adding padding to items in a list pushes the listing panel up into the filter/status area. I'd expect padding to instead push the list down from the top of the pagination panel. This issue also affects lists utilizing custom list delegates.

Setup My environment:

To Reproduce Add padding to the Title elements.

Source Code Add the following to the bubbletea list bubble default example to replace the model initialisation line:

    ddStyles := list.NewDefaultItemStyles()
    ddStyles.NormalTitle.PaddingTop(1)
    ddStyles.DimmedTitle.PaddingTop(1)
    ddStyles.SelectedTitle.PaddingTop(1)
    ndd := func() list.DefaultDelegate {
        ldd := list.DefaultDelegate{
            ShowDescription: true,
            Styles:          ddStyles,
        }
        ldd.SetHeight(2)
        ldd.SetSpacing(1)
        return ldd
    }
    m := model{list: list.New(items, ndd(), 0, 0)} // model initialisation

A runnable version can be found here

Expected behavior The status and title panels should remain visible.

Screenshots Expected (although this shows no padding): normal Problem output (padding causes the top title and status panels to be hidden): problem Attempting to differentiate headings in list items by adding padding is what exposed this issue. use-case

rorycl commented 7 months ago

I'm not sure but it seems that in updatePatingation only the delegate's height is included in the height calculation, rather than each item's height including styling.

See list.go

m.Paginator.PerPage = max(1, availHeight/(m.delegate.Height()+m.delegate.Spacing()))

Perhaps this can only be calculated correctly (particularly with my inconsistently padded example above) by iterating through the items to calculate the sum of heights. delegate.Height() also does not seem to report heights resulting from lipgloss style heights. Perhaps a delegate.HeightWithStyle() function would be useful?