Fix height example.

[skip ci]

docs/examples/styles/height_comparison.css

@@ -11,7 +11,7 @@
     height: 12.5h;   /* (4)! */
 }
 #vw {
-    height: 7.5vw;   /* (5)! */
+    height: 6.25vw;  /* (5)! */
 }
 #vh {
     height: 12.5vh;  /* (6)! */
@@ -26,9 +26,14 @@
     height: 2fr;     /* (9)! */
 }
 
-VerticalRuler {
+Screen {
+    layers: ruler;
+}
+
+Ruler {
+    layer: ruler;
     dock: right;
     overflow: hidden;
-    width: auto;
+    width: 1;
     background: $accent;
 }

docs/examples/styles/height_comparison.py

@@ -3,16 +3,16 @@ from textual.containers import Vertical
 from textual.widgets import Placeholder, Label, Static
 
 
-class VerticalRuler(Static):
+class Ruler(Static):
     def compose(self):
-        ruler_text = "\n".join(map(str, range(1, 100)))
+        ruler_text = "·\n·\n·\n·\n•\n" * 100
         yield Label(ruler_text)
 
 
 class HeightComparisonApp(App):
     def compose(self):
         yield Vertical(
-            Placeholder(id="cells"),    # (1)!
+            Placeholder(id="cells"),  # (1)!
             Placeholder(id="percent"),
             Placeholder(id="w"),
             Placeholder(id="h"),
@@ -22,7 +22,7 @@ class HeightComparisonApp(App):
             Placeholder(id="fr1"),
             Placeholder(id="fr2"),
         )
-        yield VerticalRuler()
+        yield Ruler()
 
 
 app = HeightComparisonApp(css_path="height_comparison.css")

docs/styles/height.md

@@ -59,7 +59,7 @@ Open the CSS file tab to see the comments that explain how each height is comput
     2. This sets the height to 12.5% of the space made available by the container. The container is 24 lines tall, so 12.5% of 24 is 3.
     3. This sets the height to 5% of the width of the direct container, which is the `Vertical` container. Because it expands to fit all of the terminal, the width of the `Vertical` is 80 and 5% of 80 is 4.
     4. This sets the height to 12.5% of the height of the direct container, which is the `Vertical` container. Because it expands to fit all of the terminal, the height of the `Vertical` is 24 and 12.5% of 24 is 3.
-    5. This sets the height to 7.5% of the viewport width, which is 80. 7.5% of 80 is 5.6 which gets truncated to 5.
+    5. This sets the height to 6.25% of the viewport width, which is 80. 6.25% of 80 is 5.
     6. This sets the height to 12.5% of the viewport height, which is 24. 12.5% of 24 is 3.
     7. This sets the height of the placeholder to be the optimal size that fits the content without scrolling.
     Because the content only spans one line, the placeholder has its height set to 1.