Merge pull request #5347 from Textualize/fix-wacky-align

Fix broken alignment applied to docked widgets

Author: willmcgugan

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.89.1] - 2024-11-05
+
+### Fixed
+
+- Fixed alignment of docked widgets https://github.com/Textualize/textual/pull/5347
+
 ## [0.89.0] - 2024-11-05
 
 ## Added
@@ -2627,6 +2633,7 @@ https://textual.textualize.io/blog/2022/11/08/version-040/#version-040
 - New handler system for messages that doesn't require inheritance
 - Improved traceback handling
 
+[0.89.1]: https://github.com/Textualize/textual/compare/v0.89.0...v0.89.1
 [0.89.0]: https://github.com/Textualize/textual/compare/v0.88.1...v0.89.0
 [0.88.1]: https://github.com/Textualize/textual/compare/v0.88.0...v0.88.1
 [0.88.0]: https://github.com/Textualize/textual/compare/v0.87.1...v0.88.0

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "textual"
-version = "0.89.0"
+version = "0.89.1"
 homepage = "https://github.com/Textualize/textual"
 repository = "https://github.com/Textualize/textual"
 documentation = "https://textual.textualize.io/"

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())