Merge pull request #1312 from Textualize/fix-layer-order

Fix layer order

src/textual/_arrange.py

@@ -41,7 +41,6 @@ def arrange(
 
     placements: list[WidgetPlacement] = []
     add_placement = placements.append
-    region = size.region
 
     _WidgetPlacement = WidgetPlacement
     top_z = TOP_Z
@@ -50,7 +49,9 @@ def arrange(
     get_dock = attrgetter("styles.dock")
     styles = widget.styles
 
+    layer_region = size.region
     for widgets in dock_layers.values():
+        region = layer_region
 
         layout_widgets, dock_widgets = partition(get_dock, widgets)
 

tests/snapshot_tests/snapshot_apps/order_independence.py

@@ -0,0 +1,71 @@
+from textual.app import App, ComposeResult
+from textual.screen import Screen
+from textual.widgets import Header, Footer, Label
+from textual.containers import Vertical, Container
+
+
+class Overlay(Container):
+    def compose(self) -> ComposeResult:
+        yield Label("This should float over the top")
+
+
+class Body1(Vertical):
+    def compose(self) -> ComposeResult:
+        yield Label("My God! It's full of stars! " * 300)
+
+
+class Body2(Vertical):
+    def compose(self) -> ComposeResult:
+        yield Label("I'm sorry, Dave. I'm afraid I can't do that. " * 300)
+
+
+class Good(Screen):
+    def compose(self) -> ComposeResult:
+        yield Header()
+        yield Overlay()
+        yield Body1()
+        yield Footer()
+
+
+class Bad(Screen):
+    def compose(self) -> ComposeResult:
+        yield Overlay()
+        yield Header()
+        yield Body2()
+        yield Footer()
+
+
+class Layers(App[None]):
+
+    CSS = """
+    Screen {
+        layers: base higher;
+    }
+
+    Overlay {
+        layer: higher;
+        dock: top;
+        width: auto;
+        height: auto;
+        padding: 2;
+        border: solid yellow;
+        background: red;
+        color: yellow;
+    }
+    """
+
+    SCREENS = {"good": Good, "bad": Bad}
+
+    BINDINGS = [("t", "toggle", "Toggle Screen")]
+
+    def on_mount(self):
+        self.push_screen("good")
+
+    def action_toggle(self):
+        self.switch_screen(
+            "bad" if self.screen.__class__.__name__ == "Good" else "good"
+        )
+
+
+if __name__ == "__main__":
+    Layers().run()

tests/snapshot_tests/test_snapshots.py

@@ -126,6 +126,16 @@ def test_multiple_css(snap_compare):
     assert snap_compare("snapshot_apps/multiple_css/multiple_css.py")
 
 
+def test_order_independence(snap_compare):
+    # Interaction between multiple CSS files and app-level/classvar CSS
+    assert snap_compare("snapshot_apps/order_independence.py")
+
+
+def test_order_independence_toggle(snap_compare):
+    # Interaction between multiple CSS files and app-level/classvar CSS
+    assert snap_compare("snapshot_apps/order_independence.py", press="t,_")
+
+
 # --- Other ---