fix basic

sandbox/will/basic.css

@@ -13,10 +13,15 @@
 }
 
 App > Screen {
-  layout: dock;
-  docks: side=left/1;
+    
   background: $surface;
   color: $text-surface; 
+  layers: sidebar;
+
+  color: $text-background;
+  background: $background;
+  layout: vertical;
+  
 }
 
 DataTable {
@@ -31,11 +36,12 @@ DataTable {
 #sidebar {
   color: $text-panel;
   background: $panel;
-  dock: side;
+  dock: left;
   width: 30;
   offset-x: -100%;
-  layout: dock;
+  
   transition: offset 500ms in_out_cubic;
+  layer: sidebar;
 }
 
 #sidebar.-active {
@@ -71,14 +77,7 @@ DataTable {
   height: 1;
   content-align: center middle;
   
-   
-}
-
-#content {
-  color: $text-background;
-  background: $background;
-  layout: vertical;
-  overflow-y: scroll;
+  dock: top;
 }
 
 
@@ -168,6 +167,7 @@ Tweet.scroll-horizontal TweetBody {
   height: 1;
   
   content-align: center middle;
+  dock:bottom;
 }
 
 

sandbox/will/basic.py

@@ -1,9 +1,9 @@
 from rich.console import RenderableType
-from rich.style import Style
+
 from rich.syntax import Syntax
 from rich.text import Text
 
-from textual.app import App
+from textual.app import App, ComposeResult
 from textual.reactive import Reactive
 from textual.widget import Widget
 from textual.widgets import Static, DataTable
@@ -98,45 +98,45 @@ class BasicApp(App, css_path="basic.css"):
         """Bind keys here."""
         self.bind("s", "toggle_class('#sidebar', '-active')")
 
-    def on_mount(self):
-        """Build layout here."""
-
+    def compose(self) -> ComposeResult:
         table = DataTable()
         self.scroll_to_target = Tweet(TweetBody())
-        self.mount(
-            header=Static(
-                Text.from_markup(
-                    "[b]This is a [u]Textual[/u] app, running in the terminal"
-                ),
-            ),
-            content=Widget(
-                Tweet(TweetBody()),
-                Widget(
-                    Static(Syntax(CODE, "python"), classes="code"),
-                    classes="scrollable",
-                ),
-                table,
-                Error(),
-                Tweet(TweetBody(), classes="scrollbar-size-custom"),
-                Warning(),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-                Success(),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-                Tweet(TweetBody(), classes="scroll-horizontal"),
-            ),
-            footer=Widget(),
-            sidebar=Widget(
-                Widget(classes="title"),
-                Widget(classes="user"),
-                OptionItem(),
-                OptionItem(),
-                OptionItem(),
-                Widget(classes="content"),
+
+        yield Static(
+            Text.from_markup(
+                "[b]This is a [u]Textual[/u] app, running in the terminal"
             ),
+            id="header",
         )
+        yield from (
+            Tweet(TweetBody()),
+            Widget(
+                Static(Syntax(CODE, "python"), classes="code"),
+                classes="scrollable",
+            ),
+            table,
+            Error(),
+            Tweet(TweetBody(), classes="scrollbar-size-custom"),
+            Warning(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Success(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+        )
+        yield Widget(id="footer")
+        yield Widget(
+            Widget(classes="title"),
+            Widget(classes="user"),
+            OptionItem(),
+            OptionItem(),
+            OptionItem(),
+            Widget(classes="content"),
+            id="sidebar",
+        )
+
         table.add_column("Foo", width=20)
         table.add_column("Bar", width=20)
         table.add_column("Baz", width=20)

sandbox/will/dock.py

@@ -41,8 +41,9 @@ class DockApp(App):
 
         for n, color in zip(range(5), ["red", "green", "blue", "yellow", "magenta"]):
             thing = Static(f"Thing {n}", id=f"#thing{n}")
+            thing.styles.border = ("heavy", "rgba(0,0,0,0.2)")
             thing.styles.background = f"{color} 20%"
-            thing.styles.height = 5
+            thing.styles.height = 15
             yield thing