TabbedContent styling affects child widgets

[davep]

TabbedContent is a little too broad in how it styles some things; this can be shown with the following code:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import Button, Tabs, TabbedContent, TabPane, Label

class TabsStyleLeakApp(App[None]):

    CSS = """
    Vertical, TabbedContent {
        width: 1fr;
    }
    """

    def stuff(self) -> ComposeResult:
        yield Label("This label is topmost")
        yield Button("This button is second")
        yield Tabs("After", "Button")

    def compose(self) -> ComposeResult:
        with Horizontal():
            with Vertical():
                yield from self.stuff()
            with TabbedContent():
                with TabPane("Test"):
                    yield from self.stuff()

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

This results in the following:

Note how the Tabs is composed last but within the TabbedContent it's displaying first due to the use of dock on Tabs within TabbedContent.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.