ModalScreen dock to right, two vertical scroll bars will appear.

[vegaoqiang]

The bug

I'm using a VerticalScroll container in a ModalScreen. When I place this ModalScreen on the left side of the screen, everything looks normal. However, when I place it on the right side, what appears to be two vertical scrollbars appear on the right.

ModalScreen on the right

ModalScreen on the left

My Code

class DetailModal(ModalScreen):

    DEFAULT_CSS = """
        #detail {
            width: 40%;
            dock: right;
            height: 1fr;
        }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(id="detail"):
            .....

When I remove the dock style in the CSS and replace it with align: right top; It will also recur. I tried adding a gap between the DetailModal and the right border, and the scrollbar, which looked abnormal, disappeared.

Please ignore the blue rectangle on the right; it is part of the background.

<!-- This is valid Markdown, please paste the following directly in to a GitHub issue -->
# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 8.2.7  |
| Rich    | 15.0.0 |

## Python

| Name           | Value                                                |
|----------------|------------------------------------------------------|
| Version        | 3.13.13                                              |
| Implementation | CPython                                              |
| Compiler       | Clang 16.0.0 (clang-1600.0.26.6)                     |
| Executable     | /Users/gaoxiang/VscodeProjects/kop/.venv/bin/python3 |

## Operating System

| Name    | Value                                                                                                  |
|---------|--------------------------------------------------------------------------------------------------------|
| System  | Darwin                                                                                                 |
| Release | 25.5.0                                                                                                 |
| Version | Darwin Kernel Version 25.5.0: Mon Apr 27 20:41:15 PDT 2026; root:xnu-12377.121.6~2/RELEASE_ARM64_T6041 |

## Terminal

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

## Rich Console options

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

[github-actions]

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

[dobbydobap]

Hi! I'd like to look into this one as well, after #6597, I can reproduce it with the snippet above. Is it free?

[vegaoqiang]

Hi! I'd like to look into this one as well, after #6597, I can reproduce it with the snippet above. Is it free?

Yes, it is completely free and open to all.

[dobbydobap]

I tried to reproduce this with the snippet from the issue on the latest main (post-8.2.8), filling the VerticalScroll with enough Statics to force scrolling, and I get a single correctly-rendered scrollbar for both dock: right and dock: left , I also compared exported screenshots of both cases and inspected the compositor's widget map, which shows only one ScrollBar widget at the right edge.

Could you share a complete minimal app that shows the problem (including any app/screen CSS), and confirm whether it still happens on 8.2.8? From your screenshots it looks like the fragments sit in the terminal's last column at different heights, so your custom CSS (e.g. scrollbar sizes) or nested scrollables may be part of the trigger.

[vegaoqiang]

I tried to reproduce this with the snippet from the issue on the latest main (post-8.2.8), filling the VerticalScroll with enough Statics to force scrolling, and I get a single correctly-rendered scrollbar for both dock: right and dock: left , I also compared exported screenshots of both cases and inspected the compositor's widget map, which shows only one ScrollBar widget at the right edge.

Could you share a complete minimal app that shows the problem (including any app/screen CSS), and confirm whether it still happens on 8.2.8? From your screenshots it looks like the fragments sit in the terminal's last column at different heights, so your custom CSS (e.g. scrollbar sizes) or nested scrollables may be part of the trigger.

I did not customize the scrollbar size and width. I have upgraded the textual library in my project to version 8.2.8, but the problem persists.

Here is a minimal app example, Based on textual 8.2.8

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.screen import ModalScreen
from textual.widgets import Label

class Modal(ModalScreen):

    DEFAULT_CSS = """
        #detail {
            width: 40%;
            dock: right;
            height: 1fr;
        }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(id="detail"):
            for i in range(100):
                yield Label(f"Modal line {i}")


class ModalApp(App):
    def on_mount(self) -> None:
        self.push_screen(Modal())
    

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

Below is a screenshot of the code above running; ModalScreen is now on the right. At this point, the scrollbars only appear wide, like two vertical scrollbars side by side, without the vertical misalignment described in the previous bug report. Is this normal?

The image below shows the scrollbar looking normal after changing the CSS style to dock: left;.

[vegaoqiang]

I recorded a video, and when using the mouse, I can only click and drag the left side of the scroll bar; the right side of the scroll bar cannot be selected or dragged.
https://github.com/user-attachments/assets/9d6c4c98-cb08-4ea1-a316-17716854b1e8

[dobbydobap]

Thanks for the minimal example , that made it possible to pin this down precisely.

I ran your exact code against 8.2.8 and inspected the cells Textual actually emits (via run_test + the compositor's render strips, across many terminal sizes including 188×52, which matches your screenshots): in both the dock: right and dock: left cases there is exactly one scrollbar, and its thumb is exactly 2 cells wide. Two cells is Textual's default vertical scrollbar width (scrollbar-size-vertical: 2), so what you see with dock: left is that same 2-cell bar.

I also measured your two screenshots pixel-by-pixel. Your terminal is ~188 columns with 16 px cells, and there's a ~16 px padding strip between the last column and the window edge. With dock: left, the thumb spans exactly 2 cells (x≈1284–1312). With dock: right, the thumb occupies the same 2 cells (x≈3088–3120) plus the 16 px padding strip (x≈3120–3136), because the terminal fills the window-edge padding by extending the background colour of the adjacent cell a common macOS terminal behaviour. That extra stretched strip is what makes it look like two scrollbars side by side.

So this is normal: Textual renders the same 2-cell scrollbar in both cases; the extra apparent width at the right edge comes from your terminal, not from Textual. You can confirm this yourself in a couple of ways:

Resize the terminal window slightly so its width is an exact multiple of the cell width the padding strip disappears and both docks look identical.
Add margin-right: 1; to #detail (moving the scrollbar off the terminal edge) it renders exactly like the dock: left case.
If you'd prefer a thinner bar, set scrollbar-size-vertical: 1; on #detail.
Out of curiosity, which terminal are you using? (iTerm2 has an "extend background colors to the edge of the window" preference that controls exactly this.)

Given the above, I don't think there's a Textual bug here the original two-fragment artifact from 0.82.7 doesn't reproduce on 8.2.8 either.

[dobbydobap]

Your video actually confirms the explanation above. I verified with a simulated mouse test at 188×52: Textual's scrollbar occupies the last two real columns (186–187), and clicking or dragging from either of those columns works both hit-test to the ScrollBar and dragging scrolls the container.

The part you can't grab is the extra strip at the far right, and that's because it isn't a character cell at all, it's your terminal's window-edge padding, painted with the background colour of the adjacent cell. Since there's no cell there, the terminal never sends mouse events for that region, so Textual can't respond to clicks on it. That's exactly the boundary you're seeing in the video: the real 2-cell scrollbar drags fine, the stretched padding strip doesn't.

[vegaoqiang]

Thank you for your reply. you are right, Add margin-right: 1; on #detail. It can indeed make the scrollbar behave like dock: left. furthermore, setting Extend background color into margins in alternate screen mode? = No in the iTerm2 advanced settings will also make the scrollbar look perfect. After adding the style scrollbar-size-vertical: 1;, the scrollbars don't look perfect; the top and bottom of the two scrollbars aren't aligned. This is probably related to the terminal. Anyway, I now know how to make the scrollbars perfect. Thank you.

[dobbydobap]

Great, thanks for confirming! Summarizing for maintainers: this isn't a Textual bug. iTerm2's "Extend background color into margins in alternate screen mode" setting stretches the last column's background into the window-edge padding, so a scrollbar flush against the right edge appears one extra (non-interactive) strip wider. Disabling that setting, or moving the scrollbar off the edge (margin-right: 1), renders it correctly.

The vertical misalignment with scrollbar-size-vertical: 1 (and most likely the "two scrollbars at different heights" in the original 0.82.7 screenshots) is the same artifact: the thumb's end caps are half-block characters whose colour is split between foreground and background, and iTerm2 extends only the background so the stretched strip shows a half-cell-shifted copy of the thumb.

I think this can be closed as working-as-intended.

[github-actions]

I hope I solved your issue!

Consider sponsoring my work to continue to maintain and develop Textual.

• Will McGugan