fix: S2 DateField horizontal scrolling (#9302)

* fix: S2 DateField horizontal scrolling

* fix in correct place

* add property

Author: snowystinger

packages/@react-spectrum/s2/src/DateField.tsx

@@ -49,7 +49,9 @@ const segmentContainer = style({
   flexShrink: 1,
   minWidth: 0,
   height: 'full',
-  overflow: 'hidden',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  scrollbarWidth: 'none',
   display: 'flex',
   alignItems: 'center',
   textWrap: 'nowrap'
@@ -144,6 +146,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
               size={size}
               styles={style({
                 ...fieldInput(),
+                textWrap: 'nowrap',
                 paddingX: 'edge-to-text'
               })({size})}>
               <DateInputContainer>

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -952,6 +952,7 @@ export const style = createTheme({
     overscrollBehaviorX: ['auto', 'contain', 'none'] as const,
     overscrollBehaviorY: ['auto', 'contain', 'none'] as const,
     scrollBehavior: ['auto', 'smooth'] as const,
+    scrollbarWidth: ['none', 'auto', 'thin'] as const,
     order: new ArbitraryProperty<number>('order'),
 
     pointerEvents: ['none', 'auto'] as const,