Fix text truncation in mobile SearchAutocomplete (#3507)

Author: devongovett

packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

@@ -279,6 +279,10 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
               classNames(
                 searchStyles,
                 'spectrum-Search-input'
+              ),
+              classNames(
+                searchAutocompleteStyles,
+                'mobile-input'
               )
             )
           }>

packages/@react-spectrum/autocomplete/src/searchautocomplete.css

@@ -28,13 +28,14 @@
 }
 
 .mobile-input {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 }
 
 .mobile-value {
-  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tray-dialog {

packages/@react-spectrum/combobox/src/combobox.css

@@ -28,13 +28,14 @@
 }
 
 .mobile-input {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 }
 
 .mobile-value {
-  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tray-dialog {