Pilot cannot click switch with horizontally aligned, long text

[TabulateJarl8]

Hey! I was writing some tests for my textual app when I noticed some strange behavior that I can't seem to resolve. When I have some static text horizontally aligned with a switch, I cannot click the switch if the text is too long. Let me show a minimal example:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets import (
	Markdown,
	Static,
	Switch,
)


class BugApp(App):
	CSS = """
	#content-container {
		width: 50%;
		height: auto;
		max-height: 100%;
		padding: 1 2;
		border: $secondary tall;
	}

	.label {
		height: 3;
		content-align: center middle;
		width: auto;
	}
	"""

	def __init__(self):
		super().__init__()

	def compose(self) -> ComposeResult:
		with Container(id='content-container'):
			yield Markdown('# Settings')

			with Horizontal():
				yield Static('Preserve Profile URL Input Value:', classes='label')
				yield Switch(
					value=True,
				)

Here's the test file:

import pytest
from textual.widgets import Switch

from bug import BugApp


@pytest.mark.asyncio
async def test_settings_screen():
	app = BugApp()

	async with app.run_test() as pilot:
		assert await pilot.click(Switch)

This current example will crash if you try to run it, as pilot will fail to click the switch resulting in an assertion error. However, the behavior gets even stranger. I've found that the maximum length that the static text can be is 28 characters, so Preserve Profile URL Input V in my example. However, if you remove the border style from the container, you get one extra character that you can have before the program will crash. Furthermore, if you remove the Markdown element from the compose function, it bumps up the character count to 37, and if you remove the border style with the Markdown gone, it behaves the same by only bumping it up to 38 available characters.

The Switch is visible on the screen the entire time, so I really don't know that the issue is here. Also, if you remove the Horizontal, the issue goes away. Hopefully some of this will help you guys figure out what the issue is.

---

Textual Diagnostics

Versions

Name	Value
Textual	0.44.1
Rich	13.7.0

Python

Name	Value
Version	3.8.18
Implementation	CPython
Compiler	GCC 13.2.1 20230801
Executable	/home/tabulate/src/vapor/.venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.7.2-arch1-2
Version	#1 SMP PREEMPT_DYNAMIC Wed, 31 Jan 2024 09:22:15 +0000

Terminal

Name	Value
Terminal Application	Unknown
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

Additional diagnostics that it missed:

Terminal: Yakuake (Konsole)
Version: textual, version 0.44.1

[github-actions]

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

• How can I select and copy text in a Textual app?

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]

Have you checked how your app looks at a smaller terminal size? The default size of the simulated app when running tests is 80x24, which I suspect is the issue.

[TomJGooding]

Sorry I also just spotted you're running Textual v0.44.1. There was recently a fix where calculating percentage dimensions previously didn't take into account padding/border, which might also explain some of the confusion about the sizing. You might want to update to version 0.48 or later.

[TabulateJarl8]

Oh, I can't believe I missed that, I forgot that poetry won't update pyproject.toml without explicit permission. Yeah, that seems to have fixed it. Thank you so much!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.