compositor nesting fix

examples/basic.css

@@ -3,8 +3,8 @@
 App > Screen {
   layout: dock;
   docks: side=left/1;
-  background: $background;
-  color: $on-background;
+  background: $surface;
+  color: $on-surface;
 }
 
 #sidebar {
@@ -32,6 +32,7 @@ App > Screen {
   height: 8;
   background: $secondary-darken1;
   color: $on-secondary-darken1;
+
   border-right: outer $secondary-darken3;
 }
 
@@ -45,14 +46,38 @@ App > Screen {
   color: $on-primary;
   background: $primary;
   height: 3;
-  border-right: outer $secondary-darken3;
+
+  border: hkey $secondary-darken3;
 }
 
 #content {
-  color: $on-background;
-  background: $background;
+  color: $on-surface;
+  background: $surface;
+  layout: vertical;
 }
 
+Tweet {
+  height: 7;
+  max-width: 80;
+  
+  margin: 1 2;
+  background: $background;
+  color: $on-background;
+  layout: vertical
+}
+
+TweetHeader {
+  height:1
+  background: $secondary
+  color: $on-secondary
+}
+
+TweetBody {  
+  background: $background
+  color: $on-background
+}
+
+
 #footer {
   color: $on-accent1;
   background: $accent1;

examples/basic.py

@@ -1,7 +1,29 @@
+from rich.console import RenderableType
+from rich.text import Text
+
 from textual.app import App
 from textual.widget import Widget
 
 
+lorem = Text.from_markup(
+    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """,
+)
+
+
+class TweetHeader(Widget):
+    def render(self) -> RenderableType:
+        return Text("Lorem Impsum", justify="center")
+
+
+class TweetBody(Widget):
+    def render(self) -> Text:
+        return lorem
+
+
+class Tweet(Widget):
+    pass
+
+
 class BasicApp(App):
     """A basic app demonstrating CSS"""
 
@@ -13,7 +35,16 @@ class BasicApp(App):
         """Build layout here."""
         self.mount(
             header=Widget(),
-            content=Widget(),
+            content=Widget(
+                Tweet(TweetHeader(), TweetBody()),
+                Tweet(TweetHeader(), TweetBody()),
+                Tweet(TweetHeader(), TweetBody())
+                # Tweet(TweetHeader(), TweetBody()),
+                # Tweet(TweetHeader(), TweetBody()),
+                # Tweet(TweetHeader(), TweetBody()),
+                # Tweet(TweetHeader(), TweetBody()),
+                # Tweet(TweetHeader(), TweetBody()),
+            ),
             footer=Widget(),
             sidebar=Widget(
                 Widget(classes={"title"}),