Maximized Widget not able to take more than ~15% of the terminal width

[nsobadzhiev]

When maximising a Widget, in some cases it happens that the widget becomes very narrow and no change in CSS, even using the -maximized class allows it to grow more than ~15% of the total width of the terminal.
You can definitely make the widget narrower (so changing the size generally works), but there seems to be a something constraining it and preventing it to grow beyond that narrow value.

Since this issue doesn't seem to happen in most cases, it might be connected to a particular App/Widget/Screen setup. I've put together a MRE here

Steps to reproduce:

• Run the MRE
• Press Tab twice to focus the "Article" wide
• Maximize it

What results is the article widget actually shrinking. The Yellow background shows the entire width of the widget.

Textual Diagnostics

Versions

Name	Value
Textual	0.83.0
Rich	13.9.2

Python

Name	Value
Version	3.12.6
Implementation	CPython
Compiler	Clang 15.0.0 (clang-1500.3.9.4)
Executable	/Users/[...]/.venv/bin/python

Operating System

Name	Value
System	Darwin
Release	24.0.0
Version	Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000

Terminal

Name	Value
Terminal Application	iTerm.app (3.5.5)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

[github-actions]

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

• Why doesn't Textual look good on macOS?
• How do I center a widget in a screen?
• No widget called TextLog

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

[TomJGooding]

I think this is caused by this CSS in home_layout.tcss:

Screen {
    layout: grid;
    grid-size: 3;
    grid-columns: 20% 20% 60%;
}

If you instead put your widgets inside a Grid container, I think the maximized size should be as expected.

[willmcgugan]

Tom is correct. When you maximize a widget it hoists it out of your interface and places it as a child of your screen. So your maximized widget is inside one of the Screen's columns.

One solution is to provide an alternative style that applies when the Screen is showing a maximized widget.

This works:

Screen.-maximized-view {
    layout: horizontal;
}

Personally though, I find it easier to leave the Screen layout as is, and have a container at the top level. But both approaches work.

[nsobadzhiev]

Yup, that did the trick! Thanks, guys!

Let me summarise the second option, mostly for other people that end up here.

Your suggestion is to not use the Screen to create the grid layout. Rather, the screen should just be a screen and there should be only one widget added to it - a container widget that contains all widgets that need to be displayed. This container widget is a user-defined subclass of Widget (not a special class that Textual provides). The Screen class should only contain:

class MyScreen(Screen[None]):

    CSS_PATH = ['my_layout.tcss']

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

And if I understand correctly, this makes sure the grid layout is only applied to the containing widget, as opposed to applying to the entire screen. Applying it to the screen would also be generally not a problem (if everything it displays always follows the same grid rules). However, in the case of maximising Widgets, it has the side-effect of also applying a grid to the maximised Widget, as maximising is still subject to Screen specifics.

Ok, now I understand I ran into some Screen specifics I wasn't aware of. Is this somewhere available in the docs? I didn't manage to find much regarding maximising. Should we add it somewhere?

Thanks for your support @willmcgugan and @TomJGooding :)

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[TomJGooding]

This container widget is a user-defined subclass of Widget (not a special class that Textual provides).

You could do that, but there is also the Grid utility container. Then you could simply add with Grid(id="optional-id"): to contain your widgets, then simply change the existing CSS mentioned above from Screen to Grid.