Various changes/fixes

sandbox/uber.css

@@ -2,7 +2,7 @@
   layout: vertical;
 
   background: dark_green;
-  overflow: hidden auto;
+  overflow: auto auto;
   border: heavy white;
 }
 
@@ -10,4 +10,5 @@
   height: 8;
   min-width: 80;
   background: dark_blue;
+  margin-bottom: 4;
 }

sandbox/uber.py

@@ -1,7 +1,9 @@
+import random
 import sys
 
 from textual import events
 from textual.app import App
+from textual.geometry import Spacing
 from textual.widget import Widget
 from textual.widgets import Placeholder
 
@@ -14,8 +16,13 @@ class BasicApp(App):
         self.bind("d", "dump")
         self.bind("t", "log_tree")
         self.bind("p", "print")
+        self.bind("o", "toggle_visibility")
+        self.bind("p", "toggle_display")
+        self.bind("f", "modify_first_child")
+        self.bind("b", "toggle_border")
+        self.bind("m", "increase_margin")
 
-    def on_mount(self):
+    async def on_mount(self):
         """Build layout here."""
 
         uber2 = Widget()
@@ -23,8 +30,9 @@ class BasicApp(App):
             Widget(id="uber2-child1"),
             Widget(id="uber2-child2"),
         )
+        self.first_child = Placeholder(id="child1", classes={"list-item"})
         uber1 = Widget(
-            Placeholder(id="child1", classes={"list-item"}),
+            self.first_child,
             Placeholder(id="child2", classes={"list-item"}),
             Placeholder(id="child3", classes={"list-item"}),
             Placeholder(classes={"list-item"}),
@@ -32,6 +40,7 @@ class BasicApp(App):
             Placeholder(classes={"list-item"}),
         )
         self.mount(uber1=uber1)
+        await self.first_child.focus()
 
     async def on_key(self, event: events.Key) -> None:
         await self.dispatch_key(event)
@@ -55,5 +64,31 @@ class BasicApp(App):
 
         sys.stdout.write("abcdef")
 
+    def action_modify_first_child(self):
+        """Increment height of first child widget, randomise border and bg color"""
+        previous_height = self.focused.styles.height.value
+        new_height = previous_height + 1
+        self.focused.styles.height = self.focused.styles.height.copy_with(
+            value=new_height
+        )
+        color = random.choice(["red", "green", "blue"])
+        self.focused.styles.background = color
+        self.focused.styles.border = ("dashed", color)
+
+    def action_toggle_visibility(self):
+        self.focused.visible = not self.focused.visible
+
+    def action_toggle_display(self):
+        # TODO: Doesn't work
+        self.focused.display = not self.focused.display
+
+    def action_toggle_border(self):
+        self.focused.styles.border = [("solid", "red"), ("solid", "white")]
+
+    def action_increase_margin(self):
+        old_margin = self.focused.styles.margin
+        new_margin = old_margin + Spacing.all(1)
+        self.focused.styles.margin = new_margin
+
 
 BasicApp.run(css_file="uber.css", log="textual.log", log_verbosity=1)