[macOS] Fix ScrollView layout with legacy (always-visible) scrollbars (Fabric)

On macOS, legacy scrollbars sit inside the NSScrollView frame and reduce
the NSClipView's visible area. React's layout system measures children
against the full frame, causing content to overflow behind the scrollbar.

Following the pattern from facebook#53247 (Switch), this fix
reads the scrollbar width synchronously during the Yoga layout pass via a
cached atomic value — no state round-trip, so the first layout is
immediately correct.

Key changes:
- Add ScrollViewShadowNode::setSystemScrollbarWidth() / getSystemScrollbarWidth()
  backed by a static atomic, called from native code at class load time
- applyScrollbarPadding() reads the cached value directly (not from state)
- Remove scrollbarTrailingWidth/scrollbarBottomHeight from ScrollViewState
- Remove autoresizingMask from documentView (prevents AppKit frame corruption)
- Move NSScroller hit test check before subview loop (fixes scrollbar clicks)
- Observe NSPreferredScrollerStyleDidChangeNotification for runtime changes

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,10 @@ - (instancetype)initWithFrame:(CGRect)frame
 #if !TARGET_OS_OSX // [macOS]
     [_scrollView addSubview:_containerView];
 #else // [macOS
-    _containerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    // Do NOT set autoresizingMask on the documentView. AppKit's autoresizing
+    // corrupts the documentView frame during tile/resize (adding the clip view's
+    // size delta to the container, inflating it beyond the actual content size).
+    // React manages the documentView frame directly via updateState:.
     [_scrollView setDocumentView:_containerView];
 #endif // macOS]
 
@@ -184,6 +187,63 @@ - (void)dealloc
 #endif // [macOS]
 }
 
+#if TARGET_OS_OSX // [macOS
++ (void)initialize
+{
+  if (self == [RCTScrollViewComponentView class]) {
+    // Pre-warm the cached scrollbar width at class load time, before any
+    // layout occurs. This ensures the first Yoga layout pass already knows
+    // the correct scrollbar dimensions — no state round-trip required.
+    [self _updateCachedScrollbarWidth];
+
+    // Observe system scrollbar style changes so we can update the cached
+    // value and trigger re-layout when the preference changes.
+    [[NSNotificationCenter defaultCenter]
+        addObserver:self
+           selector:@selector(_systemScrollerStyleDidChange:)
+               name:NSPreferredScrollerStyleDidChangeNotification
+             object:nil];
+  }
+}
+
++ (void)_updateCachedScrollbarWidth
+{
+  CGFloat width = 0;
+  if ([NSScroller preferredScrollerStyle] == NSScrollerStyleLegacy) {
+    width = [NSScroller scrollerWidthForControlSize:NSControlSizeRegular
+                                      scrollerStyle:NSScrollerStyleLegacy];
+  }
+  ScrollViewShadowNode::setSystemScrollbarWidth(static_cast<Float>(width));
+}
+
++ (void)_systemScrollerStyleDidChange:(NSNotification *)notification
+{
+  [self _updateCachedScrollbarWidth];
+}
+
+- (void)_preferredScrollerStyleDidChange:(NSNotification *)notification
+{
+  // Update the native scroll view's scroller style and re-tile so scrollers
+  // are properly created/removed.
+  _scrollView.scrollerStyle = [NSScroller preferredScrollerStyle];
+  [_scrollView tile];
+
+  // Force a state update to trigger shadow tree re-clone. The cloned
+  // ScrollViewShadowNode will read the updated cached scrollbar width
+  // in applyScrollbarPadding() and re-layout with correct padding.
+  if (_state) {
+    _state->updateState(
+        [](const ScrollViewShadowNode::ConcreteState::Data &oldData)
+            -> ScrollViewShadowNode::ConcreteState::SharedData {
+          auto newData = oldData;
+          // Reset contentBoundingRect to force a state difference
+          newData.contentBoundingRect = {};
+          return std::make_shared<const ScrollViewShadowNode::ConcreteState::Data>(newData);
+        });
+  }
+}
+#endif // macOS]
+
 #if TARGET_OS_IOS
 - (void)_registerKeyboardListener
 {
@@ -534,6 +594,11 @@ - (void)updateState:(const State::Shared &)state oldState:(const State::Shared &
   [self _preserveContentOffsetIfNeededWithBlock:^{
     self->_scrollView.contentSize = contentSize;
   }];
+
+#if TARGET_OS_OSX // [macOS
+  // Force the scroll view to re-evaluate which scrollers should be visible.
+  [_scrollView tile];
+#endif // macOS]
 }
 
 - (RCTPlatformView *)betterHitTest:(CGPoint)point withEvent:(UIEvent *)event // [macOS]
@@ -561,6 +626,21 @@ - (RCTPlatformView *)betterHitTest:(CGPoint)point withEvent:(UIEvent *)event //
     return nil;
   }
 
+#if TARGET_OS_OSX // [macOS
+  // Check if the hit lands on a scrollbar (NSScroller) BEFORE checking content
+  // subviews. Scrollers are subviews of the NSScrollView, not the documentView
+  // (_containerView). They must be checked first because content views typically
+  // fill the entire visible area and would otherwise swallow scroller clicks —
+  // for both overlay and legacy (always-visible) scrollbar styles.
+  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) {
@@ -865,12 +945,20 @@ - (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
+    // Observe system scrollbar style changes so we can update scrollbar insets for Yoga layout
+    [defaultCenter addObserver:self
+                      selector:@selector(_preferredScrollerStyleDidChange:)
+                          name:NSPreferredScrollerStyleDidChangeNotification
+                        object:nil];
   }
 #endif // macOS]
 

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewShadowNode.cpp

@@ -7,13 +7,89 @@
 
 #include "ScrollViewShadowNode.h"
 
+#include <atomic>
 #include <react/debug/react_native_assert.h>
+#include <react/renderer/components/view/YogaStylableProps.h>
 #include <react/renderer/core/LayoutMetrics.h>
+#include <react/renderer/graphics/Float.h>
 
 namespace facebook::react {
 
 const char ScrollViewComponentName[] = "ScrollView";
 
+// [macOS] Cached system scrollbar width, set from native code at startup and
+// when the system "Show scroll bars" preference changes. Read synchronously
+// during Yoga layout so the first pass is immediately correct.
+static std::atomic<float> systemScrollbarWidth_{0.0f};
+
+void ScrollViewShadowNode::setSystemScrollbarWidth(Float width) {
+  systemScrollbarWidth_.store(
+      static_cast<float>(width), std::memory_order_relaxed);
+}
+
+Float ScrollViewShadowNode::getSystemScrollbarWidth() {
+  return static_cast<Float>(
+      systemScrollbarWidth_.load(std::memory_order_relaxed));
+}
+
+ScrollViewShadowNode::ScrollViewShadowNode(
+    const ShadowNodeFragment& fragment,
+    const ShadowNodeFamily::Shared& family,
+    ShadowNodeTraits traits)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  applyScrollbarPadding();
+}
+
+ScrollViewShadowNode::ScrollViewShadowNode(
+    const ShadowNode& sourceShadowNode,
+    const ShadowNodeFragment& fragment)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  applyScrollbarPadding();
+}
+
+void ScrollViewShadowNode::applyScrollbarPadding() {
+  // [macOS] On macOS, legacy (always-visible) scrollbars sit inside the
+  // NSScrollView frame and reduce the NSClipView's visible area. Without
+  // adjustment, Yoga lays out children against the full ScrollView width,
+  // causing content to overflow the visible area.
+  //
+  // Read the scrollbar width directly from the cached system value (set by
+  // native code via setSystemScrollbarWidth). This is synchronous — no state
+  // round-trip — so the first layout pass is immediately correct.
+  //
+  // IMPORTANT: We read the base padding from props (not the current Yoga
+  // style) to avoid double-counting. When a shadow node is cloned, the Yoga
+  // style is copied from the source node which may already include scrollbar
+  // padding from a previous applyScrollbarPadding() call.
+  Float scrollbarWidth = getSystemScrollbarWidth();
+
+  const auto& props = static_cast<const YogaStylableProps&>(*props_);
+  const auto& propsStyle = props.yogaStyle;
+
+  auto style = yogaNode_.style();
+  bool changed = false;
+
+  // Compute target right padding: base from props + scrollbar width
+  {
+    auto basePadding = propsStyle.padding(yoga::Edge::Right);
+    Float baseValue = 0;
+    if (basePadding.isDefined() && basePadding.isPoints()) {
+      baseValue = basePadding.value().unwrap();
+    }
+    Float targetValue = baseValue + scrollbarWidth;
+    auto targetPadding = yoga::StyleLength::points(targetValue);
+    if (targetPadding != style.padding(yoga::Edge::Right)) {
+      style.setPadding(yoga::Edge::Right, targetPadding);
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    yogaNode_.setStyle(style);
+    yogaNode_.setDirty(true);
+  }
+}
+
 void ScrollViewShadowNode::updateStateIfNeeded() {
   ensureUnsealed();
 

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewShadowNode.h

@@ -27,13 +27,27 @@ class ScrollViewShadowNode final : public ConcreteViewShadowNode<
                                        ScrollViewEventEmitter,
                                        ScrollViewState> {
  public:
-  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  ScrollViewShadowNode(
+      const ShadowNodeFragment& fragment,
+      const ShadowNodeFamily::Shared& family,
+      ShadowNodeTraits traits);
+  ScrollViewShadowNode(
+      const ShadowNode& sourceShadowNode,
+      const ShadowNodeFragment& fragment);
 
   static ScrollViewState initialStateData(
       const Props::Shared& props,
       const ShadowNodeFamily::Shared& family,
       const ComponentDescriptor& componentDescriptor);
 
+  // [macOS] Set the system scrollbar width (e.g. legacy scroller width on
+  // macOS). Called from native code at startup and when the system "Show scroll
+  // bars" preference changes. The value is read synchronously during Yoga
+  // layout, so the first layout pass is immediately correct — no state
+  // round-trip required. Thread-safe (uses atomic store/load).
+  static void setSystemScrollbarWidth(Float width);
+  static Float getSystemScrollbarWidth();
+
 #pragma mark - LayoutableShadowNode
 
   void layout(LayoutContext layoutContext) override;
@@ -42,6 +56,7 @@ class ScrollViewShadowNode final : public ConcreteViewShadowNode<
  private:
   void updateStateIfNeeded();
   void updateScrollContentOffsetIfNeeded();
+  void applyScrollbarPadding();
 };
 
 } // namespace facebook::react