fix for percentage dimensions

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - `SelectionList` option IDs are usable as soon as the widget is instantiated https://github.com/Textualize/textual/issues/3903
 - Fix issue with `Strip.crop` when crop window start aligned with strip end https://github.com/Textualize/textual/pull/3998
 - Fixed Strip.crop_extend https://github.com/Textualize/textual/pull/4011
+- Fix for percentage dimensions https://github.com/Textualize/textual/pull/4037
 
 
 ## [0.47.1] - 2023-01-05

src/textual/_arrange.py

@@ -160,5 +160,4 @@ def _arrange_dock_widgets(
             _WidgetPlacement(dock_region, null_spacing, dock_widget, top_z, True)
         )
     dock_spacing = Spacing(top, right, bottom, left)
-
     return (placements, dock_spacing)

src/textual/css/scalar.py

@@ -37,8 +37,6 @@ class Unit(Enum):
     AUTO = 8
 
 
-UNIT_EXCLUDES_BORDER = {Unit.CELLS, Unit.FRACTION, Unit.VIEW_WIDTH, Unit.VIEW_HEIGHT}
-
 UNIT_SYMBOL = {
     Unit.CELLS: "",
     Unit.FRACTION: "fr",
@@ -206,10 +204,6 @@ def is_fraction(self) -> bool:
         """Check if the unit is a fraction."""
         return self.unit == Unit.FRACTION
 
-    @property
-    def excludes_border(self) -> bool:
-        return self.unit in UNIT_EXCLUDES_BORDER
-
     @property
     def cells(self) -> int | None:
         """Check if the unit is explicit cells."""

src/textual/layouts/horizontal.py

@@ -26,7 +26,9 @@ def arrange(
         add_placement = placements.append
 
         child_styles = [child.styles for child in children]
-        box_margins: list[Spacing] = [styles.margin for styles in child_styles]
+        box_margins: list[Spacing] = [
+            styles.margin for styles in child_styles if styles.overlay != "screen"
+        ]
         if box_margins:
             resolve_margin = Size(
                 sum(
@@ -36,7 +38,7 @@ def arrange(
                     ]
                 )
                 + (box_margins[0].left + box_margins[-1].right),
-                max(
+                min(
                     [
                         margin_top + margin_bottom
                         for margin_top, _, margin_bottom, _ in box_margins

src/textual/layouts/vertical.py

@@ -29,7 +29,7 @@ def arrange(
         ]
         if box_margins:
             resolve_margin = Size(
-                max(
+                min(
                     [
                         margin_right + margin_left
                         for _, margin_right, _, margin_left in box_margins

src/textual/widget.py

@@ -1075,18 +1075,14 @@ def _get_box_model(
 
         # Container minus padding and border
         content_container = container - gutter.totals
-        # The container including the content
-        sizing_container = content_container if is_border_box else container
 
         if styles.width is None:
             # No width specified, fill available space
             content_width = Fraction(content_container.width - margin.width)
         elif is_auto_width:
             # When width is auto, we want enough space to always fit the content
             content_width = Fraction(
-                self.get_content_width(
-                    content_container - styles.margin.totals, viewport
-                )
+                self.get_content_width(content_container - margin.totals, viewport)
             )
             if styles.scrollbar_gutter == "stable" and styles.overflow_x == "auto":
                 content_width += styles.scrollbar_size_vertical
@@ -1099,25 +1095,21 @@ def _get_box_model(
             # An explicit width
             styles_width = styles.width
             content_width = styles_width.resolve(
-                sizing_container - styles.margin.totals, viewport, width_fraction
+                container - margin.totals, viewport, width_fraction
             )
-            if is_border_box and styles_width.excludes_border:
+            if is_border_box:
                 content_width -= gutter.width
 
         if styles.min_width is not None:
             # Restrict to minimum width, if set
-            min_width = styles.min_width.resolve(
-                content_container, viewport, width_fraction
-            )
+            min_width = styles.min_width.resolve(container, viewport, width_fraction)
             if is_border_box:
                 min_width -= gutter.width
             content_width = max(content_width, min_width, Fraction(0))
 
         if styles.max_width is not None:
             # Restrict to maximum width, if set
-            max_width = styles.max_width.resolve(
-                content_container, viewport, width_fraction
-            )
+            max_width = styles.max_width.resolve(container, viewport, width_fraction)
             if is_border_box:
                 max_width -= gutter.width
             content_width = min(content_width, max_width)
@@ -1143,25 +1135,21 @@ def _get_box_model(
             styles_height = styles.height
             # Explicit height set
             content_height = styles_height.resolve(
-                sizing_container - styles.margin.totals, viewport, height_fraction
+                container - margin.totals, viewport, height_fraction
             )
-            if is_border_box and styles_height.excludes_border:
+            if is_border_box:
                 content_height -= gutter.height
 
         if styles.min_height is not None:
             # Restrict to minimum height, if set
-            min_height = styles.min_height.resolve(
-                content_container, viewport, height_fraction
-            )
+            min_height = styles.min_height.resolve(container, viewport, height_fraction)
             if is_border_box:
                 min_height -= gutter.height
             content_height = max(content_height, min_height, Fraction(0))
 
         if styles.max_height is not None:
             # Restrict maximum height, if set
-            max_height = styles.max_height.resolve(
-                content_container, viewport, height_fraction
-            )
+            max_height = styles.max_height.resolve(container, viewport, height_fraction)
             if is_border_box:
                 max_height -= gutter.height
             content_height = min(content_height, max_height)

tests/snapshot_tests/snapshot_apps/input_percentage_width.py

@@ -0,0 +1,35 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Input, TextArea, Static, Button, Label
+
+
+class InputVsTextArea(App[None]):
+    CSS = """
+    Screen > *, Screen > *:focus {
+        width: 50%;
+        height: 1fr;
+        border: solid red;
+    }
+    App #ruler {
+        width: 1fr;
+        height: 1;
+        border: none;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Label("[reverse]0123456789[/]0123456789" * 4, id="ruler")
+
+        input = Input()
+        input.cursor_blink = False
+        yield input
+
+        text_area = TextArea()
+        text_area.cursor_blink = False
+        yield text_area
+
+        yield Static()
+        yield Button()
+
+
+if __name__ == "__main__":
+    InputVsTextArea().run()

tests/snapshot_tests/test_snapshots.py

@@ -984,3 +984,9 @@ def test_nested_specificity(snap_compare):
 def test_tab_rename(snap_compare):
     """Test setting a new label for a tab amongst a TabbedContent."""
     assert snap_compare(SNAPSHOT_APPS_DIR / "tab_rename.py")
+
+
+def test_input_percentage_width(snap_compare):
+    """Check percentage widths work correctly."""
+    # https://github.com/Textualize/textual/issues/3721
+    assert snap_compare(SNAPSHOT_APPS_DIR / "input_percentage_width.py")