scrollbar-gutter causes loading overlay to not fully overlay

[davep]

This has turned up with Textual 0.42. If you have a widget that is styled scrollbar-gutter: stable, the loading overlay seems to "leak" whatever's underneath on the edge of the indicator. Using this code (using an OptionList as that's the widget I discovered it with):

from textual.app import App, ComposeResult
from textual.widgets import OptionList

class LoadingOverlayRedux(App[None]):

    CSS = """
    OptionList {
        scrollbar-gutter: stable;
        width: 1fr;
        height: 1fr;
    }
    """

    BINDINGS = [
        ("space", "toggle")
    ]

    def compose(self) -> ComposeResult:
        yield OptionList(*[
            ("X" * 500) for _ in range(1_000)
        ])

    def action_toggle(self) -> None:
        self.query_one(OptionList).loading = not self.query_one(OptionList).loading

if __name__ == "__main__":
    LoadingOverlayRedux().run()

it initially looks like this:

and then if I toggle loading:

[willmcgugan]

Fixed now.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[davep]

Fixed now.

@willmcgugan Which PR fixed this, as I'm still seeing the exact same problem with 0.43.2 and also main?

[willmcgugan]

My mistake. It is still there.

[willmcgugan]

Seems to be more than scroll gutter at play. If you scroll down you don't see the loading indicator. Like its not taking in to account scroll position.

[davep]

Good spot!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.