Bug: bottom item appears below screen

[MatrixManAtYrService]

Hi. I've been messing around in the css branch because it appears to be where the action is. I'd understand if you're not ready to get issues about that code yet--it being in active development--but in case you are...

Here's some code:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets import Static
from rich.text import Text

class WithWidth(Static):
    DEFAULT_CSS = """
        WithWidth {
            width: 3;
        }
        """


class MyApp(App):
    def compose(self) -> ComposeResult:
        yield Container(Horizontal(WithWidth("foo"), Static("bar")), Static("baz"))

The resulting app looks like this:

foobar|
      |
      |
      |
baz    <--- this line is hidden until you scroll down

It seems like textual is trying to put baz at the bottom of the screen, but there's an off-by-one error somewhere and instead it's making the screen larger by one line--which means I have to scroll to see it.

Here's an asciicast which shows the problem https://asciinema.org/a/jj7bsil2pCx55MMzeqFAMDn6H

Another thing that I think is kind of weird is that if you make this edit:

        #yield Container(Horizontal(WithWidth("foo"), Static("bar")), Static("baz"))
        yield Container(Horizontal(Static("foo"), Static("bar")), Static("baz"))

bar doesn't appear at all because it's hiding behind foo. It's easy enough to make the width sensitive to the underlying string's length, but I wonder if maybe it would be better to have that be the default behavior. (Or maybe I'm overlooking the correct widget?).

[MatrixManAtYrService]

Applying dock: bottom; seems to fix the baz-too-low problem, so both of theses have easy workarounds, but I still think that the default behavior could be smarter.

[willmcgugan]

I think you have a parenthesis in the wrong place. Here's your code reformatted a little:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets import Static
from rich.text import Text


class WithWidth(Static):
    DEFAULT_CSS = """
        WithWidth {
            width: 3;
        }
        """


class MyApp(App):
    def compose(self) -> ComposeResult:
        yield Container(
            Horizontal(WithWidth("foo"), Static("bar")),
            Static("baz"),
        )

Inside your container you have a horizontal (which takes up the full screen), followed by a Static, which accounts for your extra line.

Suspect you meant something like the following?

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets import Static
from rich.text import Text


class WithWidth(Static):
    DEFAULT_CSS = """
        WithWidth {
            width: 3;
        }
        """


class MyApp(App):
    def compose(self) -> ComposeResult:
        yield Container(
            Horizontal(
                WithWidth("foo"),
                WithWidth("bar"),
                WithWidth("baz"),
            )
        )

[MatrixManAtYrService]

Oh I see. I was overlooking that Horizontal takes up the whole screen. I had expected something like:

foobar
baz

A long time ago (and the last time I bothered with a UI) I did some work with WPF StackPanels and I had mistakendly assumed that Horizontal would work like one of those (which don't expand to fill available space).

Thanks for your answer.