fix: exclude active indicator items from content-visibility containment

content-visibility: auto applies paint containment which clips the
activeIndicatorLine ::after pseudo-element positioned outside the li bounds.
Exclude items with :focus, [data-is-active-descendant], [data-active], and
[data-input-focused] from content-visibility: auto so the indicator remains
visible.

Author: hectahertz

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -16,8 +16,10 @@
   overflow: auto;
   flex-grow: 1;
 
-  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists */
-  & .ActionListItem {
+  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
+     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
+     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
+  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {
     content-visibility: auto;
     contain-intrinsic-size: auto 32px;
   }

packages/react/src/experimental/SelectPanel2/SelectPanel.module.css

@@ -79,8 +79,10 @@
     flex-grow: 1;
   }
 
-  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists */
-  li {
+  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
+     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
+     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
+  li:not(:focus, [data-is-active-descendant], [data-active]) {
     content-visibility: auto;
     contain-intrinsic-size: auto 32px;
   }