TabbedContent Width seems to be always 100%.

[BurnoutDV]

I got a two column layout, left got a tree element and the right got a further divided Panel, it might look exactly like this:

The first tab is a datatable and it contains more entries than are visible. Only the tree widget got a fixed width of 32, if it had none it would just stop existing. The datatable should have a scrollbar but just doesnt. If i set the width of the tabbedContent Container manually there is one.
The MarkdownViewers on the other two tabs are also cut

It seems like the widget is either always 100% of the width, regardless of what else is present, or I am just bad at tcss and my partially defined arrangement is not suitable.

My goal was to have a fixed tree on the left and the rest of the view is the tabbed stuff, so either a datatable or the notes in markdown. For now this works but I just spend 30 minutes fiddling with tcss and adding/removing containers and nothing seem to change the fact that the TabbedContent Thing is egoistic.

If you must look at the full horror, it is here: https://github.com/BurnoutDV/EpisodeNames inside Screens\EpisodeScreens@EpisodeScreen
Otherwise, here the relevant snippets.

What is it I am doing wrong?

with Horizontal():
    yield Tree("Project", id="project_tree", classes="sidebar")
    with TabbedContent(id="tabs"):
        with TabPane(i18n['Episodes'], id='tab_episode'):
            with ScrollableContainer(can_focus=False): #? stop gap measure to restore scrollability
                DataTable(id="entryview", zebra_stripes=True, cursor_type="row")
        with TabPane(i18n['Project Notes']):
            yield MarkdownViewer(id='project_notes', show_table_of_contents=False)
        with TabPane(i18n['All Notes']):
            yield MarkdownViewer(id="combined_view", show_table_of_contents=False)

relevant classes

.sidebar {
    width: 32;
}

[BurnoutDV]

5 Minutes after I contemplated for 2 hours whether to write or not I had the bright idea to use dock: left for the Tree and that actually worked. Yet, the behavior seems to be wrong in any case.

[willmcgugan]

Add borders to your elements, and it should indicate what is wrong.

[BurnoutDV]

As I initially said, it seems the TabbedPane uses the entire width of the window instead of what is left after the fixed 32 characters from tree.

TabPane: Yellow
TabbedContent: green
Tree: red
DataTable: red

[willmcgugan]

Try setting the outer most widget to width 1fr. https://textual.textualize.io/how-to/design-a-layout/

[BurnoutDV]

Yes that worked, thanks for your patience Mr McGugan. And again what learned.