fix for tabs

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed unintuitive sizing behaviour of TabbedContent https://github.com/Textualize/textual/issues/2411
+- Fixed relative units not always expanding auto containers https://github.com/Textualize/textual/pull/3059
 - Fixed background refresh https://github.com/Textualize/textual/issues/3055
 
 

src/textual/css/scalar.py

@@ -245,6 +245,7 @@ def from_number(cls, value: float) -> Scalar:
         return cls(float(value), Unit.CELLS, Unit.WIDTH)
 
     @classmethod
+    @lru_cache(maxsize=1024)
     def parse(cls, token: str, percent_unit: Unit = Unit.WIDTH) -> Scalar:
         """Parse a string in to a Scalar
 

src/textual/css/styles.py

@@ -420,10 +420,7 @@ def auto_dimensions(self) -> bool:
     def is_relative_width(self) -> bool:
         """Does the node have a relative width?"""
         width = self.width
-        return width is not None and width.unit in (
-            Unit.FRACTION,
-            Unit.PERCENT,
-        )
+        return width is not None and width.unit in (Unit.FRACTION, Unit.PERCENT)
 
     @property
     def is_relative_height(self) -> bool:

src/textual/screen.py

@@ -848,8 +848,6 @@ def _handle_mouse_move(self, event: events.MouseMove) -> None:
                 except NoMatches:
                     pass
                 else:
-                    tooltip.styles.offset = event.screen_offset
-
                     if self._tooltip_widget != widget or not tooltip.display:
                         self._tooltip_widget = widget
                         if self._tooltip_timer is not None:

src/textual/widget.py

@@ -1537,17 +1537,40 @@ def _console(self) -> Console:
 
     @property
     def _has_relative_children_width(self) -> bool:
-        """Do any children have a relative width?"""
+        """Do any children (or progeny) have a relative width?"""
         if not self.is_container:
             return False
-        return any(widget.styles.is_relative_width for widget in self.children)
+        for child in self.children:
+            styles = child.styles
+            if styles.display == "none":
+                continue
+            width = styles.width
+            if width is None:
+                continue
+            if styles.is_relative_width or (
+                width.is_auto and child._has_relative_children_width
+            ):
+                return True
+        return False
 
     @property
     def _has_relative_children_height(self) -> bool:
-        """Do any children have a relative height?"""
+        """Do any children (or progeny) have a relative height?"""
+
         if not self.is_container:
             return False
-        return any(widget.styles.is_relative_height for widget in self.children)
+        for child in self.children:
+            styles = child.styles
+            if styles.display == "none":
+                continue
+            height = styles.height
+            if height is None:
+                continue
+            if styles.is_relative_height or (
+                height.is_auto and child._has_relative_children_height
+            ):
+                return True
+        return False
 
     def animate(
         self,

src/textual/widgets/_content_switcher.py

@@ -19,6 +19,13 @@ class ContentSwitcher(Container):
         Children that have no ID will be hidden and ignored.
     """
 
+    DEFAULT_CSS = """
+    ContentSwitcher {
+        height: auto;
+    }
+
+    """
+
     current: reactive[str | None] = reactive[Optional[str]](None, init=False)
     """The ID of the currently-displayed widget.
 

src/textual/widgets/_tabbed_content.py

@@ -97,11 +97,12 @@ class TabbedContent(Widget):
     """A container with associated tabs to toggle content visibility."""
 
     DEFAULT_CSS = """
+
     TabbedContent {
         height: auto;
     }
-    TabbedContent > ContentSwitcher {
-        height: auto;
+    TabbedContent Tabs {
+        dock: top;
     }
     """
 

src/textual/widgets/_tabs.py

@@ -150,7 +150,7 @@ class Tabs(Widget, can_focus=True):
     DEFAULT_CSS = """
     Tabs {
         width: 100%;
-        height:3;
+        height: 3;
     }
     Tabs > #tabs-scroll {
         overflow: hidden;

tests/snapshot_tests/snapshot_apps/nested_fr.py

@@ -0,0 +1,39 @@
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widgets import Static
+
+
+class AutoApp(App):
+    """The innermost container should push its parents outwards, to fill the screen."""
+
+    CSS = """
+    #outer {
+        background: blue;
+        height: auto;
+        border: solid white;
+    } 
+
+    #inner {
+        background: green;
+        height: auto;
+        border: solid yellow;
+    }
+
+    #innermost {
+        background: cyan;
+        height: 1fr;
+        color: auto;        
+    }
+
+    """
+
+    def compose(self) -> ComposeResult:
+        with Vertical(id="outer"):
+            with Vertical(id="inner"):
+                with Vertical(id="innermost"):
+                    yield Static("Hello\nWorld!\nfoo", id="helloworld")
+
+
+if __name__ == "__main__":
+    app = AutoApp()
+    app.run()

tests/snapshot_tests/test_snapshots.py

@@ -605,3 +605,8 @@ def test_print_capture(snap_compare) -> None:
 
 def test_text_log_blank_write(snap_compare) -> None:
     assert snap_compare(SNAPSHOT_APPS_DIR / "text_log_blank_write.py")
+
+
+def test_nested_fr(snap_compare) -> None:
+    # https://github.com/Textualize/textual/pull/3059
+    assert snap_compare(SNAPSHOT_APPS_DIR / "nested_fr.py")