Textual 2.0 Regression - Auto no longer making widgets / containers as small as possible

[driscollis]

Have you checked closed issues? (https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed) - YES

Have you checked against the most recent version of Textual? (https://pypi.org/search/?q=textual) - YES

Feature requests

Please post feature requests to Ideas. (https://github.com/Textualize/textual/discussions/categories/ideas)

The bug

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. Check it can run without modifications.

Using auto to set the height of a Horizontal container used to make a row of widgets shrink to the smallest size possible while showing the widgets. This worked in Textual 1.0 and earlier. In 2.0.0, the Horizontal container is taking up around 50% of the height.

Python code:

import datetime

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import Button, DataTable, Header, Label

class MyApp(App):

    CSS_PATH = "myapp.tcss"

    def compose(self) -> ComposeResult:
        """
        Create the user interface
        """
        now =  datetime.datetime.now().isoformat()
        self.last_updated = Label(f"Last Updated: {now[0:-7]}",
                                  id="last_updated",
                                  )

        yield Header()
        yield Vertical(
                    DataTable(id="datatable"),
                    Horizontal(
                        Button("OK", variant="primary", id="ok"),
                        Button("Cancel", variant="error", id="cancel"),
                        self.last_updated,
                        id="button_row",
                    ),
                    id="main_tab",
                )

    def on_mount(self) -> None:
        rows = [("Name", "Occupation", "Country",),
                ("Mike", "Python Wrangler", "USA",),
                ("Bill", "Engineer", "UK",),
                ("Dee", "Manager", "Germany"),
                ]
        table = self.query_one(DataTable)
        table.clear(columns=True)
        table.add_columns(*rows[0])
        table.add_rows(rows[1:])


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

CSS code:

MyApp {
    align: center middle;
    #datatable {
        height: 1fr;
    }

    Horizontal {
        height: auto;
    }

    #button_row {
        align: center middle;
    }

    Button {
        margin: 1;
    }

    #last_updated {
        dock: right;
        offset: 0 2;
    }
}

Screenshot using Textual 1.0:

Screenshot using Textual 2.0.0

It will be helpful if you run the following command and paste the results:

textual diagnose

Results of running the above command:

Textual Diagnostics

Versions

Name	Value
Textual	2.0.4
Rich	13.7.1

Python

Name	Value
Version	3.12.3
Implementation	CPython
Compiler	MSC v.1938 64 bit (AMD64)
Executable	C:\Users\wheifrd\AppData\Local\Programs\Python\Python312\python.exe

Operating System

Name	Value
System	Windows
Release	10
Version	10.0.19045

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	Not set
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=142, height=37
legacy_windows	False
min_width	1
max_width	142
is_terminal	True
encoding	utf-8
max_height	37
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

If you don't have the textual command on your path, you may have forgotten to install the textual-dev package.

Feel free to add screenshots and / or videos. These can be very helpful!

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• Does Textual support images?
• Why do some key combinations never make it to my app?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[davidfokkema]

Is this related to #5407 ?

[willmcgugan]

@davidfokkema I think so, yes. The container is auto, and the children are auto.

[driscollis]

Neat! My example made it into the test suite!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[willmcgugan]

I often copy MREs for use as tests. I wouldn't be surprised if there was more from you!

[davidfokkema]

Very nice! This happens to also fix an issue in my grading app I noticed yesterday when quickly trying it out with 2.0. Splat! Another bug squashed 🪳