snapshot

Author: willmcgugan

src/textual/_arrange.py

@@ -167,10 +167,7 @@ def _arrange_dock_widgets(
             # Should not occur, mainly to keep Mypy happy
             raise AssertionError("invalid value for dock edge")  # pragma: no-cover
 
-        align_offset = dock_widget.styles._align_size(
-            (widget_width, widget_height), size
-        )
-        dock_region = dock_region.shrink(margin).translate(align_offset)
+        dock_region = dock_region.shrink(margin)
         styles = dock_widget.styles
         offset = (
             styles.offset.resolve(

src/textual/css/styles.py

@@ -735,6 +735,7 @@ def _align_width(self, width: int, parent_width: int) -> int:
                 offset_x = (parent_width - width) // 2
             else:
                 offset_x = parent_width - width
+
         return offset_x
 
     def _align_height(self, height: int, parent_height: int) -> int:

src/textual/widgets/_toast.py

@@ -150,7 +150,7 @@ class ToastRack(Container, inherit_css=False):
         layer: _toastrack;
         width: 1fr;
         height: auto;
-        dock: top;
+        dock: bottom;
         align: right bottom;
         visibility: hidden;
         layout: vertical;

tests/snapshot_tests/__snapshots__/test_snapshots/test_dock_align.svg

@@ -2913,3 +2913,74 @@ def compose(self) -> ComposeResult:
             yield label
 
     snap_compare(TabApp())
+
+
+def test_dock_align(snap_compare):
+    """Regression test for https://github.com/Textualize/textual/issues/5345
+    You should see a blue panel aligned to the top right of the screen, with a centered button."""
+
+    class MainContainer(Static):
+        def compose(self):
+            yield Sidebar()
+
+    # ~~~~ Sidebar widget ~~~~
+    class Sidebar(Static):
+        def compose(self):
+            yield StartButtons()
+
+    # ~~~~ the two buttons inside the sidebar ~~~~
+    class StartButtons(Static):
+        def compose(self):
+            yield Button("Start", variant="primary", id="start")
+            yield Button("Stop", variant="error", id="stop")
+
+    # ~~~~ main ~~~~
+    class Test1(App):
+        CSS = """
+
+        Screen {
+            layout: horizontal;
+        }
+
+        MainContainer {    
+            width: 100%;
+            height: 100%;
+            background: red;
+            layout: horizontal;
+        }
+
+
+        Sidebar {
+            width: 40;
+            background: blue;
+            border: double green;
+            layout: vertical;
+
+        /* seems to be a weird interaction between these two */
+        /*    V V V V    */
+            dock: right;
+            align-horizontal: center;
+
+        }
+
+        StartButtons {
+            max-width: 18.5;
+            height: 5;
+            background: $boost;
+            padding: 1;
+            layout: horizontal;
+        }
+        #start {
+            dock: left;
+        }
+        #stop {
+            dock: left;
+        }
+
+
+"""
+
+        def compose(self):
+            yield MainContainer()
+
+    snap_compare(Test1())