The button is cut off when I roll up the screen.

[jakubziebin]

I have a similar structure in application:

from textual.app import App, ComposeResult
from textual.containers import ScrollableContainer
from textual.screen import Screen
from textual.widgets import Footer, Button, Label, LoadingIndicator, TabPane, TabbedContent
from textual.widget import Widget


class MyWidget(Widget):
    DEFAULT_CSS = """
    MyWidget {
        layout: horizontal;
    }
    """

    def compose(self) -> ComposeResult:
        yield Label("Example label")
        yield Button("Hidden button")


class MyScrollableContainer(ScrollableContainer):
    def compose(self) -> ComposeResult:
        yield LoadingIndicator()

    def on_mount(self) -> None:
        self.query("*").remove()
        self.mount(MyWidget())


class MyTabPane(TabPane):
    DEFAULT_CSS = """
    MyTabPane {
        overflow-y: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield MyScrollableContainer()


class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            yield MyTabPane("MY TAB")
        yield Footer()


class MyApp(App[None]):
    def on_mount(self):
        self.push_screen(MyScreen())


MyApp().run()

When I collapse the screen, scrolling appears, but the button is cut off. I can only see 1/3 of it, and when I scroll down, I can't see it.
I'm using 0.41.0 version of textual. We dealt with this by adding two empty statics at the end, but I don't think this is the best way.

[davep]

It's not clear to me what your question is; as outlined above you seem to be saying that if you size your window down enough that your whole app can't fit inside it any more, it can't fit inside it any more. Do you think you could try and describe the problem in a slightly different way so it's clear what you're looking for help with?

[jakubziebin]

In general, I would expect this behaviour: I roll up the screen and when the element is not visible - the scrollbar starts to be visible. So i can scroll down to see the whole element\elements. Now the scroll starts to be visible at 1/3 of the button (as in the screenshot) and it is impossible to scroll down and see the whole button.

[jakubziebin]

For example, in this case I have a Container with height: 3, the scroll starts to be visible at this point and I can scroll along the whole container and see the whole thing.

[davep]

I think I'm going to have to leave it for someone else to dive in, as I'm afraid I'm still struggling to understand the explanation, sorry.

[TomJGooding]

If I've understood the issue correctly, I think adding a height for MyWidget would fix this.

I've created a reduced example based on your code, just to make it a bit easier to reason about.

Before

After

from textual.app import App, ComposeResult
from textual.containers import ScrollableContainer
from textual.widget import Widget
from textual.widgets import Button, Label, TabbedContent, TabPane


class MyWidget(Widget):
    DEFAULT_CSS = """
    MyWidget {
        layout: horizontal;
        height: auto;
        width: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield Label("Example label")
        yield Button("Hidden button")


class MyTabPane(TabPane):
    def compose(self) -> ComposeResult:
        with ScrollableContainer():
            yield MyWidget()


class MyApp(App[None]):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            yield MyTabPane("MY TAB")


if __name__ == "__main__":
    app = MyApp()
    app.run()