Button rendering fails with non-standard text alignment

[holdenweb]

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

• Up to a year ago I can't find anything but one issue referring to https://textual.textualize.io/FAQ/#why-doesnt-textual-look-good-on-macos, which doesn't appear to address this issue.

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.

• In the attached program the buttons are styled as text-align: left; and they render incorrectly, with misalignment of the right-hand borders, and hovering or clicking makes things worse. Removing the styling, so the button text is centred by default, removes the rendering error.
• With text-align: left;:

• Without:

Buggy program (as .txt to allow uploading): button_bug.txt

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

Textual Diagnostics

Versions

Name	Value
Textual	0.40.0
Rich	13.6.0

Python

Name	Value
Version	3.10.13
Implementation	CPython
Compiler	Clang 14.0.3 (clang-1403.0.22.14.1)
Executable	/Users/sholden/Library/Caches/pypoetry/virtualenvs/textutils-sKIyU2bn-py3.10/bin/python

Operating System

Name	Value
System	Darwin
Release	22.1.0
Version	Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103

Terminal

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

Rich Console options

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

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

[willmcgugan]

I can't seem to reproduce that, with virtually the same setup. There's a missing import in button_bug.txt. Is there a missing dependancy?

[willmcgugan]

Ah, I can't reproduce it on main. But I can on v0.40.0. Curious.

[holdenweb]

The missing import is indeed a bug in my code, but removing the line essentially changes nothing, since the SaveCancel class is defined in the code. Sorry for this sloppiness, and glad you fixed the bug.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[holdenweb]

I'd appreciate it if you could verify that the file zipped in newbutt.zip still (despite the removal of text-align from the styles!) mangles the appearance of the buttons. The program is standalone other than Textual modules.

This makes me suspect perhaps #3571 didn't fix the issue I was seeing. This is on 0.41.0. textual diagnose output follows.

Textual Diagnostics

Versions

Name	Value
Textual	0.41.0
Rich	13.6.0

Python

Name	Value
Version	3.11.5
Implementation	CPython
Compiler	Clang 14.0.3 (clang-1403.0.22.14.1)
Executable	/private/tmp/txvenv/bin/python3.11

Operating System

Name	Value
System	Darwin
Release	22.1.0
Version	Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103

Terminal

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

Rich Console options

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

[davep]

@holdenweb As I look at this, it seems to me this is the MRE of the problem you're seeing:

from textual.app import App, ComposeResult
from textual.widgets import Button

class ButtonIssue(App[None]):

    CSS = """
    Button {
        outline: white;
    }
    """

    def compose(self) -> ComposeResult:
        yield Button("Test")

if __name__ == "__main__":
    ButtonIssue().run()

That is: the issue is the use of outline.

[holdenweb]

Yes, that nails it.

[davep]

Given this wandered around a wee bit, and might actually have hit on two different issues, I'll raise a fresh one with the above.