grid-rows: auto seems to be broken when column-span/Pretty is used

[mzebrak]

Looks like there is a rendering issue when column-span (or Pretty widget) is used together with grid-rows: auto.

Consider such a example:

from __future__ import annotations

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Grid
from textual.widgets import Footer, Pretty, Static


class MyGrid(Grid):
    """A simple grid with 2 columns and 2 rows."""


class MyApp(App):
    BINDINGS = [
        Binding("a", "add", "Add a new item"),
    ]

    DEFAULT_CSS = """
    MyGrid {
        height: auto;
        grid-rows: auto;
        grid-size: 2;
        grid-gutter: 1;
        background: green;
    }

    Pretty {
        background: red;
    }

    Static {
        background: blue;
    }
"""

    def compose(self) -> ComposeResult:
        with MyGrid():
            yield Pretty(["Something that should have colspan=2"])
            yield Static("")
            yield Static("I want this")
            yield Static("... in a single row")
        yield Footer()

    def action_add(self):
        pretty = self.query_one(Pretty)
        before = pretty._renderable._object
        pretty.update([*before, before[0]])


MyApp().run()

Results (correctly) in:

But not quite correct when we change the terminal size a bit (adds a lot of free green space):

When using column-span:

from __future__ import annotations

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Grid
from textual.widgets import Footer, Pretty, Static


class MyGrid(Grid):
    """A simple grid with 2 columns and 2 rows."""


class MyApp(App):
    BINDINGS = [
        Binding("a", "add", "Add a new item"),
    ]

    DEFAULT_CSS = """
    MyGrid {
        height: auto;
        grid-rows: auto;
        grid-size: 2;
        grid-gutter: 1;
        background: green;
    }

    Pretty {
        column-span: 2;
        background: red;
    }

    Static {
        background: blue;
    }
"""

    def compose(self) -> ComposeResult:
        with MyGrid():
            yield Pretty(["Something that should have colspan=2"])
            yield Static("I want this")
            yield Static("... in a single row")
        yield Footer()

    def action_add(self):
        pretty = self.query_one(Pretty)
        before = pretty._renderable._object
        pretty.update([*before, before[0]])


MyApp().run()

Results (correctly) in:

But incorrectly when we add something (adds extra green space):

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[willmcgugan]

@rodrigogiraoserrao Would you like to tackle this one? The issue seems to be in grid.py, and it is related to gutter.

[willmcgugan]

Actually, @rodrigogiraoserrao This may be the fix #4219

Would you mind confirming, and adding a snapshot test? The code on this issue is probably good enough, if you find a terminal size where it breaks.

[rodrigogiraoserrao]

Would you mind confirming, and adding a snapshot test? The code on this issue is probably good enough, if you find a terminal size where it breaks.

Done

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.