[macOS] Report scrollbar insets to Yoga for correct ScrollView child layout

On macOS, legacy (always-visible) scrollbars sit inside the NSScrollView
frame and reduce the NSClipView's visible area. React's layout system
measures ScrollView children against the full frame, causing content to
overflow the visible area when legacy scrollbars are present.

This fix feeds the vertical scrollbar width from the native side back to
the shadow tree via ScrollViewState, where the ScrollViewShadowNode
applies it as additional Yoga right padding. This reduces the available
layout space for children to match the actual clip view size — the same
approach SwiftUI uses when proposing sizes to ScrollView children.

Key changes:
- Remove autoresizingMask from documentView to prevent AppKit from
  corrupting its frame during tile/resize
- Detect scrollbar dimensions in setFrame: and send via state update
- Observe NSPreferredScrollerStyleDidChangeNotification to react to
  system preference changes ("Show scroll bars: Always" ↔ "When scrolling")
- Move NSScroller hit test check before subview loop so scrollbar clicks
  aren't swallowed by content views
- Only account for vertical scrollbar (horizontal causes feedback loop)

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,67 @@ - (void)dealloc
 #endif // [macOS]
 }
 
+#if TARGET_OS_OSX // [macOS
+- (void)setFrame:(NSRect)frame
+{
+  [super setFrame:frame];
+  [self _updateScrollbarInsetsIfNeeded];
+}
+
+- (void)_updateScrollbarInsetsIfNeeded
+{
+  if (!_state) {
+    return;
+  }
+
+  CGFloat verticalScrollerWidth = 0;
+
+  // When scrollbars use the legacy (always-visible) style, they sit inside the
+  // NSScrollView frame and reduce the NSClipView's visible area. Detect the
+  // scrollbar dimensions so Yoga can account for them when laying out children.
+  //
+  // Only the vertical scrollbar is accounted for. Adding bottom padding for the
+  // horizontal scrollbar creates a feedback loop: the extra padding makes content
+  // taller, which triggers the horizontal scrollbar, which adds more padding, etc.
+  //
+  // Use [NSScroller preferredScrollerStyle] (the system-level preference) rather
+  // than _scrollView.scrollerStyle, because the scroll view's own property may
+  // not have updated yet after a system preference change. Use the class method
+  // +scrollerWidthForControlSize:scrollerStyle: to get dimensions without
+  // requiring the scroller to be laid out.
+  NSScrollerStyle preferredStyle = [NSScroller preferredScrollerStyle];
+  if (preferredStyle == NSScrollerStyleLegacy) {
+    if (_scrollView.hasVerticalScroller) {
+      verticalScrollerWidth = [NSScroller
+          scrollerWidthForControlSize:NSControlSizeRegular
+                        scrollerStyle:NSScrollerStyleLegacy];
+    }
+  }
+
+  _state->updateState(
+      [verticalScrollerWidth](
+          const ScrollViewShadowNode::ConcreteState::Data &oldData)
+          -> ScrollViewShadowNode::ConcreteState::SharedData {
+        if (oldData.scrollbarTrailingWidth == static_cast<Float>(verticalScrollerWidth)) {
+          return nullptr;
+        }
+        auto newData = oldData;
+        newData.scrollbarTrailingWidth = static_cast<Float>(verticalScrollerWidth);
+        return std::make_shared<const ScrollViewShadowNode::ConcreteState::Data>(newData);
+      });
+}
+
+- (void)_preferredScrollerStyleDidChange:(NSNotification *)notification
+{
+  // When the system scrollbar style changes (e.g., "Show scroll bars: Always" ↔
+  // "When scrolling"), force the scroll view to adopt the new style and re-tile
+  // so scrollers are properly created/removed, then update Yoga insets.
+  _scrollView.scrollerStyle = [NSScroller preferredScrollerStyle];
+  [_scrollView tile];
+  [self _updateScrollbarInsetsIfNeeded];
+}
+#endif // macOS]
+
 #if TARGET_OS_IOS
 - (void)_registerKeyboardListener
 {
@@ -534,6 +598,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 +630,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 +949,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

@@ -8,12 +8,92 @@
 #include "ScrollViewShadowNode.h"
 
 #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";
 
+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.
+  //
+  // This adds the scrollbar dimensions as extra Yoga padding so children
+  // are measured against the actual visible area, matching how SwiftUI
+  // proposes the clip view size to its children.
+  //
+  // 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.
+  const auto& state = getStateData();
+
+  // Read base padding from props (the source of truth for user-set values).
+  // We always read from props, not the Yoga style, because the Yoga style may
+  // already include scrollbar padding from a previous clone.
+  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 scrollbarWidth = state.scrollbarTrailingWidth > 0 ? state.scrollbarTrailingWidth : Float{0};
+    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;
+    }
+  }
+
+  // Compute target bottom padding: base from props + scrollbar height
+  {
+    auto basePadding = propsStyle.padding(yoga::Edge::Bottom);
+    Float baseValue = 0;
+    if (basePadding.isDefined() && basePadding.isPoints()) {
+      baseValue = basePadding.value().unwrap();
+    }
+    Float scrollbarHeight = state.scrollbarBottomHeight > 0 ? state.scrollbarBottomHeight : Float{0};
+    Float targetValue = baseValue + scrollbarHeight;
+    auto targetPadding = yoga::StyleLength::points(targetValue);
+    if (targetPadding != style.padding(yoga::Edge::Bottom)) {
+      style.setPadding(yoga::Edge::Bottom, 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,7 +27,13 @@ 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,
@@ -42,6 +48,7 @@ class ScrollViewShadowNode final : public ConcreteViewShadowNode<
  private:
   void updateStateIfNeeded();
   void updateScrollContentOffsetIfNeeded();
+  void applyScrollbarPadding();
 };
 
 } // namespace facebook::react

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

@@ -33,6 +33,13 @@ class ScrollViewState final {
   Rect contentBoundingRect;
   int scrollAwayPaddingTop;
 
+  // [macOS] Space consumed by always-visible (legacy-style) scrollbars.
+  // When non-zero, the ScrollView shadow node adds this as extra padding so
+  // Yoga lays out children within the actual visible area (clip view), not the
+  // full ScrollView frame. Zero when scrollbars are overlay-style.
+  Float scrollbarTrailingWidth{0};
+  Float scrollbarBottomHeight{0};
+
   /*
    * Returns size of scrollable area.
    */