Fix SearchWithin picker so that it doesn't overflow the component width (#2203)

* fix searchwithin picker shrink

* increasing searchwithin picker min width

Co-authored-by: Danni <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: 3 people

packages/@adobe/spectrum-css-temp/components/searchwithin/index.css

@@ -29,8 +29,8 @@ governing permissions and limitations under the License.
 
 .spectrum-SearchWithin-picker {
   inline-size: auto;
-  min-inline-size: var(--spectrum-global-dimension-size-900);
-  flex-shrink: 0;
+  min-inline-size: var(--spectrum-global-dimension-size-1000);
+  flex-shrink: 1;
 
   > button {
     contain: unset;

packages/@react-spectrum/searchwithin/stories/SearchWithin.stories.tsx

@@ -33,6 +33,7 @@ function render(props: Omit<SpectrumSearchWithinProps, 'children'> = {}, searchF
         <Item key="campaigns">Campaigns</Item>
         <Item key="audiences">Audiences</Item>
         <Item key="tags">Tags</Item>
+        <Item key="long">This item is very long and word wraps poorly</Item>
       </Picker>
     </SearchWithin>
   );
@@ -46,6 +47,7 @@ function renderReverse(props: Omit<SpectrumSearchWithinProps, 'children'> = {},
         <Item key="campaigns">Campaigns</Item>
         <Item key="audiences">Audiences</Item>
         <Item key="tags">Tags</Item>
+        <Item key="long">This item is very long and word wraps poorly</Item>
       </Picker>
       <SearchField placeholder="Search" {...searchFieldProps} onChange={action('change')} onSubmit={action('submit')} />
     </SearchWithin>
@@ -65,6 +67,7 @@ function ResizeSearchWithinApp(props) {
             <Item key="campaigns">Campaigns</Item>
             <Item key="audiences">Audiences</Item>
             <Item key="tags">Tags</Item>
+            <Item key="long">This item is very long and word wraps poorly</Item>
           </Picker>
         </SearchWithin>
       </div>