From aad41b8de04445dc9c0b36af58c04b3fe44c799f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Sat, 7 Jan 2023 09:44:28 +0000
Subject: [PATCH] Fix height example.

[skip ci]
---
 docs/examples/styles/height_comparison.css | 11 ++++++++---
 docs/examples/styles/height_comparison.py  |  8 ++++----
 docs/styles/height.md                      |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/docs/examples/styles/height_comparison.css b/docs/examples/styles/height_comparison.css
index ca2737e07..10902dda5 100644
--- a/docs/examples/styles/height_comparison.css
+++ b/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;
 }
diff --git a/docs/examples/styles/height_comparison.py b/docs/examples/styles/height_comparison.py
index b24f257aa..c679a68e6 100644
--- a/docs/examples/styles/height_comparison.py
+++ b/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")
diff --git a/docs/styles/height.md b/docs/styles/height.md
index 97dd82524..437f69b8d 100644
--- a/docs/styles/height.md
+++ b/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.