Oddity with layers, can someone explain?

[vsajip]

In the following script, I attempt to implement a dialog using layers.

from __future__ import annotations  # noqa

from rich.console import Console
from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, Vertical
from textual.widgets import Label, Footer, Header

console = Console()

class Dialog(Container):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.content = Container(
            Label("Example App"),
            Label("A tool for doing something or other"),
            Label("Copyright (C) 2022 The Copyright Holders"),
            Label("https://www.example.com/"),
            id="dialog",
        )

    def compose(self) -> ComposeResult:
        yield self.content

DIALOG_HEIGHT = 11
DIALOG_WIDTH = 51

def get_dialog_position(dw, dh):
    x = (console.width - dw) // 2
    y = (console.height - dh) // 2
    return (x, y)

class TestApp(App):

    BINDINGS = [('ctrl+d', 'show_dialog', 'Show Dialog')]

    CSS = '''
        Dialog {
            margin-left: %s;
            margin-top: %s;
            layer: dialog;
            width: %s;
            height: %s;
        }
        Screen {
            layers: base dialog;
        }
        #pane1 {
            height: 100%%;
            width: 1fr;
            border-right: solid $secondary-background;
            overflow: hidden;
        }
        #pane2 {
            height: 100%%;
            width: 1fr;
            border-right: solid $secondary-background;
            overflow: hidden;
            background: darkgray;
            color: black;
        }
        #pane3 {
            height: 100%%;
            width: 1fr;
        }
        .hidden {
            display: none;
        }
        #dialog {
            content-align: center middle;
            border: solid brown;
            background: ansi_white;
        }
        #dialog Label {
            text-align: center;
            width: 1fr;
            margin-top: 1;
            color: ansi_red;
        }
    ''' % (get_dialog_position(DIALOG_WIDTH, DIALOG_HEIGHT) +
           (DIALOG_WIDTH, DIALOG_HEIGHT))

    def __init__(self):
        super().__init__()
        self.title = 'Test App'
        self.dialog_showing = False
        self.dialog = Dialog(classes='hidden')

    def action_show_dialog(self):
        if not self.dialog_showing:
            self.dialog.toggle_class('hidden')
            self.dialog_showing = True

    def hide_dialog(self):
        if self.dialog_showing:
            self.dialog.toggle_class('hidden')
            self.dialog_showing = False

    def on_key(self, event):
        self.hide_dialog()

    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()
        pane1 = Vertical(Label('Pane 1'), id='pane1')
        pane2 = Vertical(Label('Pane 2'),
                         Label('Press any key to dismiss the dialog'),
                         id='pane2')
        pane3 = Container(Label('Pane 3'), id='pane3')
        yield Horizontal(pane1, pane2, pane3)
        yield self.dialog


app = TestApp()
app.run()

I use the Ctrl+D binding to show the dialog, and any key to hide it. The oddity is - when the dialog is displayed, even though it's in its own layer, the layout of the base layer seems to change slightly (height increases by one, it seems, and a vertical scrollbar appears). When the dialog is hidden, the layout reverts to what it was before the dialog was displayed. Can anyone explain why? The following should illustrate what I mean:

[davep]

It's not obvious to me what the cause would be, I'm failing to recreate it here with 0.5.0, macOS, iTerm:

Screen.Recording.2022-12-07.at.09.33.22.mov

[vsajip]

OK, perhaps it's a feature of Linux terminals (or perhaps just this flavour - Linux Mint/Cinnamon)

[willmcgugan]

This looks similar to a bug we fixed recently. Can you try this against main?

[vsajip]

Yes, tried just now with the latest version:

$ git log | head -5
commit d1e284f238c9c72f84d78b817e66f70a5012c776
Merge: cdf43d73 f1500f84
Author: Will McGugan <[email protected]>
Date:   Wed Dec 7 18:32:03 2022 +0100

Installed into my venv with pip install -U .[dev]. The behaviour is the same 😞

[vsajip]

When I get a chance I'll try on a different Ubuntu variant and report back.

[vsajip]

Tried on two separate VPSes - both machines Ubuntu 20.04.5 headless with vanilla terminal. Problem occurs on one, but not the other 😕