Incorrect word wrapping in horizontal layout

[rndusr]

I'm seeing an issue with word-wrapping if a Static contains text that is longer than its width. This only happens in a horizontal layout with other widgets.

Notice how the text is properly wrapped without the timestamp widget and how parts of the text seem to continue outside of the terminal with the timestamp.

I've installed textual and rich from git:

$ pip install --upgrade --force git+https://github.com/textualize/textual/
$ pip install --upgrade --force git+https://github.com/textualize/rich/

import textual.app
import textual.containers
import textual.widget
import textual.widgets

TEXT = (
    "So many resources are devoted to internal issues that no external input "
    "can be processed anymore, and the system stops working. The world may be "
    "undergoing a revolution, Rome may be burning, but the philosophical "
    "discourse remains detached, meaningless, and utterly oblivious. Time for "
    "an upgrade."
)

class Timestamp(textual.widgets.Static):
    def __init__(self):
        super().__init__('12:46:29')
        self.styles.width = 'auto'
        self.styles.background = 'darkgreen'

class Message(textual.widgets.Static):
    def __init__(self, message):
        super().__init__(message)
        self.styles.background = 'navy'

class TextWrapDemo(textual.app.App):
    def compose(self):
        yield Message(TEXT)
        yield textual.containers.Horizontal(
            Timestamp(),
            Message(TEXT),
        )

app = TextWrapDemo()
app.run()

Output of textual diagnose:

Textual Diagnostics

Versions

Name	Value
Textual	0.37.0
Rich	13.5.2

Python

Name	Value
Version	3.11.5
Implementation	CPython
Compiler	GCC 13.2.0
Executable	[...]/venv/bin/python3

Operating System

Name	Value
System	Linux
Release	6.4.0-4-amd64
Version	#1 SMP PREEMPT_DYNAMIC Debian 6.4.13-1 (2023-08-31)

Terminal

Name	Value
Terminal Application	Alacritty
TERM	alacritty
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

[willmcgugan]

Your message is being clipped. Static will use the width of the container by default. If you add on the width of your timestamp, then the message will be pushed off the right of the screen.

If you set the width to "1fr", it will tell Textual to use the remaining width.

import textual.app
import textual.containers
import textual.widget
import textual.widgets

TEXT = (
    "So many resources are devoted to internal issues that no external input "
    "can be processed anymore, and the system stops working. The world may be "
    "undergoing a revolution, Rome may be burning, but the philosophical "
    "discourse remains detached, meaningless, and utterly oblivious. Time for "
    "an upgrade."
)


class Timestamp(textual.widgets.Static):
    def __init__(self):
        super().__init__("12:46:29")
        self.styles.width = "auto"
        self.styles.background = "darkgreen"


class Message(textual.widgets.Static):
    def __init__(self, message):
        super().__init__(message)
        self.styles.background = "navy"
        self.styles.width = "1fr"


class TextWrapDemo(textual.app.App):
    def compose(self):
        yield Message(TEXT)
        yield textual.containers.Horizontal(
            Timestamp(),
            Message(TEXT),
        )


app = TextWrapDemo()
app.run()

If you see clipping like this. The best way to figure it out is to add a border. If the border is offscreen, then it means there is not enough space to fit all your widgets. Here's your code with a border around the message, which makes it clear what is happening:

import textual.app
import textual.containers
import textual.widget
import textual.widgets

TEXT = (
    "So many resources are devoted to internal issues that no external input "
    "can be processed anymore, and the system stops working. The world may be "
    "undergoing a revolution, Rome may be burning, but the philosophical "
    "discourse remains detached, meaningless, and utterly oblivious. Time for "
    "an upgrade."
)


class Timestamp(textual.widgets.Static):
    def __init__(self):
        super().__init__("12:46:29")
        self.styles.width = "auto"
        self.styles.background = "darkgreen"


class Message(textual.widgets.Static):
    def __init__(self, message):
        super().__init__(message)
        self.styles.background = "navy"        
        self.styles.border = ("heavy", "green")


class TextWrapDemo(textual.app.App):
    def compose(self):
        yield Message(TEXT)
        yield textual.containers.Horizontal(
            Timestamp(),
            Message(TEXT),
        )


app = TextWrapDemo()
app.run()

[rndusr]

Thank you very much for the quick and very helpful reply.

This is highly unintuitive to me. I would expect any widget to use the space that is available, not the space of the terminal or some parent container.

I guess I have to get more experience with textual and rich.

[willmcgugan]

Widgets can scroll. Which means you have more space that just the screen. If you add multiple widgets in the vertical direction you wouldn't want everything crammed in to the screen. The same logic is applied to horizontal scrolling.

[rndusr]

OK, if I you put it that way, that makes sense. Thanks again!