fix(fabric): force overlay scrollbar style in ScrollView (#2907)

## Summary
- Force `NSScrollerStyleOverlay` on Fabric ScrollViews to fix layout
overflow on first render
- Remove `autoresizingMask` from documentView to prevent AppKit frame
corruption
- Fix scrollbar click hit testing (check `NSScroller` before content
subviews)
- Re-force overlay style when the system "Show scroll bars" preference
changes at runtime

## Why force overlay instead of supporting legacy scrollbars?

1. **Every other platform uses overlay scrollbars.** iOS, Android, and
web all render scrollbar indicators that float above content. macOS is
the only platform where scrollbars can sit inside the frame and reduce
the visible content area. Forcing overlay aligns macOS behavior with
every other React Native platform.

2. **Supporting legacy scrollbars required invasive changes to
ReactCommon.** The alternative approach required adding cached atomic
values, custom shadow node constructors, and padding adjustments in the
Yoga layout pass at the `ScrollViewShadowNode` C++ layer — a significant
cross-platform change to support a single-platform edge case.

3. **Apple themselves call non-overlay scrollbars "legacy."** The API is
literally `NSScrollerStyleLegacy`. Mac Catalyst doesn't even respect
this system preference (it always uses overlay). SwiftUI does respect
it, but SwiftUI also has the advantage of proposing clip view size to
children — something React Native's layout system doesn't do.

## Test plan
- [x] Open RNTester on macOS with "Show scroll bars: Always" in System
Settings
- [x] Verify ScrollView content does not overflow on first render
- [x] Verify scrollbars appear as overlay style (thin, semi-transparent)
- [x] Verify switching system preference at runtime doesn't bring back
legacy scrollbars
- [x] Verify scrollbar clicks work (drag the scrollbar thumb)
- [x] Verify window resize doesn't cause content overflow
- [x] Test with "Show scroll bars: When scrolling" (default) — unchanged
behavior

Fixes #2857

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -157,7 +157,9 @@ - (instancetype)initWithFrame:(CGRect)frame
 #if !TARGET_OS_OSX // [macOS]
     [_scrollView addSubview:_containerView];
 #else // [macOS
-    _containerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    // Force overlay scrollbar style to avoid layout issues with legacy scrollbars.
+    _scrollView.scrollerStyle = NSScrollerStyleOverlay;
+    // Don't set autoresizingMask — AppKit corrupts the documentView frame during tile/resize.
     [_scrollView setDocumentView:_containerView];
 #endif // macOS]
 
@@ -185,26 +187,11 @@ - (void)dealloc
 }
 
 #if TARGET_OS_OSX // [macOS
-- (void)layoutSubviews
-{
-  [super layoutSubviews];
-
-  // On macOS, the _containerView is the NSScrollView's documentView and has autoresizingMask set so
-  // it fills the visible area before React's first layout pass. However, AppKit's autoresizing can
-  // corrupt the documentView's frame by adding the NSClipView's size delta to the container's
-  // dimensions (e.g., during initial tile or window resize), inflating it well beyond the correct
-  // content size. This produces massive horizontal and vertical overflow on first render.
-  //
-  // After React has set the content size via updateState:, we reset the documentView frame here to
-  // undo any autoresizing corruption. This runs after AppKit's layout (which triggers autoresizing),
-  // so it reliably corrects the frame.
-  if (!CGSizeEqualToSize(_contentSize, CGSizeZero)) {
-    CGRect containerFrame = _containerView.frame;
-    if (!CGSizeEqualToSize(containerFrame.size, _contentSize)) {
-      containerFrame.size = _contentSize;
-      _containerView.frame = containerFrame;
-    }
-  }
+- (void)_preferredScrollerStyleDidChange:(NSNotification *)notification
+{
+  // Re-force overlay style when system preference changes.
+  _scrollView.scrollerStyle = NSScrollerStyleOverlay;
+  [_scrollView tile];
 }
 #endif // macOS]
 
@@ -585,6 +572,18 @@ - (RCTPlatformView *)betterHitTest:(CGPoint)point withEvent:(UIEvent *)event //
     return nil;
   }
 
+#if TARGET_OS_OSX // [macOS
+  // Check scrollbars before content subviews — scrollers are NSScrollView children,
+  // not documentView children, so full-width content would swallow their clicks.
+  if (isPointInside) {
+    NSPoint scrollViewPoint = [_scrollView convertPoint:point fromView:self];
+    NSView *scrollViewHit = [_scrollView hitTest:scrollViewPoint];
+    if ([scrollViewHit isKindOfClass:[NSScroller class]]) {
+      return (RCTPlatformView *)scrollViewHit;
+    }
+  }
+#endif // macOS]
+
   for (RCTPlatformView *subview in [_containerView.subviews reverseObjectEnumerator]) { // [macOS]
     RCTPlatformView *hitView = RCTUIViewHitTestWithEvent(subview, point, self, event); // [macOS]
     if (hitView) {
@@ -889,12 +888,19 @@ - (void)viewDidMoveToWindow // [macOS]
     [defaultCenter removeObserver:self
                              name:NSViewBoundsDidChangeNotification
                            object:_scrollView.contentView];
+    [defaultCenter removeObserver:self
+                             name:NSPreferredScrollerStyleDidChangeNotification
+                           object:nil];
   } else {
     // Register for scrollview's clipview bounds change notifications so we can track scrolling
     [defaultCenter addObserver:self
                       selector:@selector(scrollViewDocumentViewBoundsDidChange:)
                           name:NSViewBoundsDidChangeNotification
                         object:_scrollView.contentView]; // NSClipView
+    [defaultCenter addObserver:self
+                      selector:@selector(_preferredScrollerStyleDidChange:)
+                          name:NSPreferredScrollerStyleDidChangeNotification
+                        object:nil];
   }
 #endif // macOS]