fix: Docs examples (#9190)

* fix: new docs bug followup

* fix scaling of placement picker

Author: snowystinger

package.json

@@ -274,8 +274,5 @@
         ]
       }
     ]
-  },
-  "locales": [
-    "en-US"
-  ]
+  }
 }

packages/dev/s2-docs/pages/s2/DateField.mdx

@@ -32,7 +32,7 @@ import {useState} from 'react';
 function Example() {
   let [date, setDate] = useState(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
-  
+
   return (
     <>
       <DateField

packages/dev/s2-docs/src/VisualExampleClient.tsx

@@ -1018,8 +1018,8 @@ function PlacementControl({control, value, onChange}) {
             "sb .  .  .  eb"
             ".  bs bc be . "
           `,
-          gridTemplateColumns: '25px 24px 24px 25px 24px',
-          gridTemplateRows: '25px 24px 24px 25px 24px'
+          gridTemplateColumns: 'calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale))',
+          gridTemplateRows: 'calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale))'
         }}>
         <PlacementControlItem id="top start" style={{gridArea: 'ts'}} />
         <PlacementControlItem id="top" style={{gridArea: 'tc'}} />

starters/docs/src/DateField.css

@@ -20,6 +20,8 @@
   white-space: nowrap;
   forced-color-adjust: none;
   cursor: text;
+  overflow-x: auto;
+  scrollbar-width: none;
 
   &[data-focus-within] {
     outline: 2px solid var(--focus-ring-color);

starters/tailwind/src/DateField.tsx

@@ -49,7 +49,7 @@ const segmentStyles = tv({
 
 export function DateInput(props: Omit<DateInputProps, 'children'>) {
   return (
-    <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'block min-w-[150px] px-2 py-1.5 text-sm font-sans'})} {...props}>
+    <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'inline min-w-[150px] px-2 py-1.5 text-sm font-sans whitespace-nowrap overflow-x-auto [scrollbar-width:none]'})} {...props}>
       {(segment) => <DateSegment segment={segment} className={segmentStyles} />}
     </AriaDateInput>
   );