Fix ListView styling (#5304)

* Quick fixes to list view styles

* Updating snapshots

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed infinite loop in `Widget.anchor` https://github.com/Textualize/textual/pull/5290
 - Restores the ability to supply console markup to command list https://github.com/Textualize/textual/pull/5294
 - Fixed delayed App Resize event https://github.com/Textualize/textual/pull/5296
+- Fixed ListView focus styling rule being too broad https://github.com/Textualize/textual/pull/5304
 - Fixed issue with auto-generated tab IDs https://github.com/Textualize/textual/pull/5298
 
 ## [0.87.1] - 2024-11-24

examples/theme_sandbox.py

@@ -190,12 +190,7 @@ class ChangingThemeApp(App[None]):
     }
     ListView { 
         height: auto;
-        & > ListItem {
-            width: 1fr;
-            & > Label {
-                width: 1fr;
-            }
-        }
+
     }
     Tree {
         height: 5;

src/textual/widgets/_list_view.py

@@ -30,10 +30,6 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
     DEFAULT_CSS = """
     ListView {
         background: $surface;
-        &:focus-within {
-            background-tint: $foreground 5%;
-        }
-
         & > ListItem {
             color: $foreground;
             height: auto;
@@ -51,12 +47,15 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
             }
         }
 
-        &:focus > ListItem.-highlight > Widget {
-            width: 1fr;
-            color: $block-cursor-foreground;
-            background: $block-cursor-background;
-            text-style: $block-cursor-text-style;            
+        &:focus {
+            background-tint: $foreground 5%;
+            & > ListItem.-highlight {
+                color: $block-cursor-foreground;
+                background: $block-cursor-background;
+                text-style: $block-cursor-text-style;
+            }
         }
+
     }
     """