Fix for viewport units, remove DataTable max-height (#2247)

* Add viewport units snapshot test

* Fix snapshot app

* Update snapshots

* Update DataTable max-height to 100%

* Update CHANGELOG.md

* Remove max height from DataTable CSS

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+### Fixed
+
+- Fix viewport units using wrong viewport size  https://github.com/Textualize/textual/pull/2247
+
+
 ## [0.19.0] - 2023-04-07
 
 ### Added

src/textual/_resolve.py

@@ -82,7 +82,7 @@ def resolve_box_models(
     dimensions: list[Scalar | None],
     widgets: list[Widget],
     size: Size,
-    parent_size: Size,
+    viewport_size: Size,
     margin: Size,
     dimension: Literal["width", "height"] = "width",
 ) -> list[BoxModel]:
@@ -92,7 +92,7 @@ def resolve_box_models(
         dimensions: A list of Scalars or Nones for each dimension.
         widgets: Widgets in resolve.
         size: Size of container.
-        parent_size: Size of parent.
+        viewport_size: Viewport size.
         margin: Total space occupied by margin
         dimensions: Which dimension to resolve.
 
@@ -111,7 +111,7 @@ def resolve_box_models(
             None
             if dimension is not None and dimension.is_fraction
             else widget._get_box_model(
-                size, parent_size, fraction_width, fraction_height
+                size, viewport_size, fraction_width, fraction_height
             )
         )
         for (dimension, widget) in zip(dimensions, widgets)
@@ -148,7 +148,7 @@ def resolve_box_models(
         box_model
         or widget._get_box_model(
             size,
-            parent_size,
+            viewport_size,
             width_fraction,
             height_fraction,
         )

src/textual/layouts/horizontal.py

@@ -25,7 +25,6 @@ class HorizontalLayout(Layout):
         placements: list[WidgetPlacement] = []
         add_placement = placements.append
         x = max_height = Fraction(0)
-        parent_size = parent.outer_size
 
         child_styles = [child.styles for child in children]
         box_margins: list[Spacing] = [styles.margin for styles in child_styles]
@@ -52,7 +51,7 @@ class HorizontalLayout(Layout):
             [styles.width for styles in child_styles],
             children,
             size,
-            parent_size,
+            parent.app.size,
             resolve_margin,
             dimension="width",
         )

src/textual/layouts/vertical.py

@@ -22,7 +22,6 @@ class VerticalLayout(Layout):
     ) -> ArrangeResult:
         placements: list[WidgetPlacement] = []
         add_placement = placements.append
-        parent_size = parent.outer_size
 
         child_styles = [child.styles for child in children]
         box_margins: list[Spacing] = [styles.margin for styles in child_styles]
@@ -49,7 +48,7 @@ class VerticalLayout(Layout):
             [styles.height for styles in child_styles],
             children,
             size,
-            parent_size,
+            parent.app.size,
             resolve_margin,
             dimension="height",
         )

src/textual/widgets/_data_table.py

@@ -249,7 +249,6 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         background: $surface ;
         color: $text;
         height: auto;
-        max-height: 100vh;
     }
     DataTable > .datatable--header {
         text-style: bold;

tests/snapshot_tests/snapshot_apps/viewport_units.py

@@ -0,0 +1,14 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+class ViewportUnits(App):
+    CSS = """Static {width: 100vw; height: 100vh; border: solid cyan;} """
+
+    def compose(self) -> ComposeResult:
+        yield Static("Hello, world!")
+
+
+app = ViewportUnits()
+if __name__ == '__main__':
+    app.run()

tests/snapshot_tests/test_snapshots.py

@@ -211,6 +211,11 @@ def test_css_property(file_name, snap_compare):
     assert snap_compare(path_to_app)
 
 
+def test_viewport_height_and_width_properties(snap_compare):
+    path_to_app = SNAPSHOT_APPS_DIR / "viewport_units.py"
+    assert snap_compare(path_to_app)
+
+
 def test_multiple_css(snap_compare):
     # Interaction between multiple CSS files and app-level/classvar CSS
     assert snap_compare("snapshot_apps/multiple_css/multiple_css.py")