Breakpoint Classes not Activating (HORIZONTAL_BREAKPOINTS)

[H0R5E]

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

Yes

Have you checked against the most recent version of Textual? (https://pypi.org/search/?q=textual)

Yes

Consider discussions!

Issues are for actionable items only.
If Textual crashes or behaves differently from the docs, then submit an issue.
If you want to know how to do something, or you have a suggestion for a new feature, then open a discussion (https://github.com/Textualize/textual/discussions/).

For realtime help, join our discord server (https://discord.gg/Enf6Z3qhVr)

The bug

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.

I am trying to use the HORIZONTAL_BREAKPOINTS setting to hide some labels once the width of the screen is below a certain size. Appending the breakpoint class to the label class seems to have no effect, which appears contrary to the docs. Perhaps I am setting this up wrong, so here is a MWE representing what I'm trying to do:

from textual.app import App
from textual.containers import (
    Horizontal,
    HorizontalScroll,
)
from textual.widgets import (
    Footer,
    Header,
    Label,
    Static,
)


class TestBreakPoints(App):
    CSS = """
    AppHeader {
        border: solid blue;
        height: 5;
        width: auto;
    }

    #app-header-labels {
        align-horizontal: center;
    }

    .app-header-label {
        width: 30;
        padding: 1 1;
        content-align-horizontal: center;
        text-style: dim;
    }

    .app-header-label.-narrow {
        width: 0;
    }

    .app-header-label.current {
        text-style: bold;
        border: solid white;
        padding: 0 0;
        
        &.-narrow {
            width: 30;
        }
    }
    """
    HORIZONTAL_BREAKPOINTS = [(0, "-narrow"), (100, "-normal")]
    BINDINGS = [
        ("q", "quit", "Quit"),
    ]

    def compose(self):
        yield Header()
        yield HorizontalScroll(AppHeader())
        yield Footer()

    def on_mount(self):
        self.title = "Breakpoints Test"


class AppHeader(Static):
    def compose(self):
        yield Horizontal(
            Label("Previous", classes="app-header-label"),
            Label("Current", classes="app-header-label current"),
            Label("Next", classes="app-header-label"),
            id="app-header-labels",
        )


def app():
    return TestBreakPoints()


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

For a "wide" terminal, all 3 labels are displayed:

When the terminal is narrowed, I would expect the outer labels to reduce in width; however, they remain unaltered:

Any help with sorting this out would be gratefully received, thanks for your time.

---

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

textual diagnose

Textual Diagnostics

Versions

Name	Value
Textual	8.2.5
Rich	15.0.0

Python

Name	Value
Version	3.14.4
Implementation	CPython
Compiler	MSC v.1944 64 bit (AMD64)
Executable	C:\Users\Work\miniforge3\envs_cvbuddy\python.exe

Operating System

Name	Value
System	Windows
Release	11
Version	10.0.26200

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	Not set
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

If you don't have the textual command on your path, you may have forgotten to install the textual-dev package.

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

[github-actions[bot]]

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 project is developed and maintained by Will McGugan. Consider sponsoring Will's work on this project (and others).

This is an automated reply, generated by FAQtory

[willmcgugan]

It's the Screen that gets the breakpoint classes, not your widgets.

You would apply your narrow rules like this:

Screen.-narrow {
    .app-header-label {
        display: none;
    }
}

I'm not sure what you intended in your MRE, but since the app-header-label is applied to all the labels, then they would all be hidden on a narrow screen.

Note that you should use "display: none;" to hide a widget, and not "width: 0;"

[willmcgugan]

I've noticed that the docs don't say where the classes are set. I will updated that in the next release.

[H0R5E]

Great, thanks for the heads up. Sorry for not going straight to a discussion. Definitely be useful to have a bit more information in the docs about setting this up. Thanks again!