switching to inline flex to stop ComboBox jumping in safari (#984)

* switching to inline flex to stop jumping in safari

* changing vertical alignment of sibling button group

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

Author: 3 people

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

@@ -63,7 +63,8 @@ governing permissions and limitations under the License.
  * and this causes both the label and inner field to resize as well. */
 .spectrum-Field {
   &.spectrum-Field--positionTop {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     width: var(--spectrum-component-single-line-width);
 
     .spectrum-Field-field {

packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx

@@ -321,7 +321,7 @@ let ControlledKeyComboBox = (props) => {
   return (
     <div>
       <div>Current selectedKey: {selectedKey}</div>
-      <ButtonGroup marginEnd="30px">
+      <ButtonGroup marginEnd="30px" UNSAFE_style={{verticalAlign: 'bottom'}}>
         <Button variant="secondary" onPress={() => setSelectedKey('3')}>
           <Text>Snake</Text>
         </Button>
@@ -353,7 +353,7 @@ let ControlledValueComboBox = (props) => {
   return (
     <div>
       <div>Current input value: {value}</div>
-      <ButtonGroup marginEnd="30px">
+      <ButtonGroup marginEnd="30px" UNSAFE_style={{verticalAlign: 'bottom'}}>
         <Button variant="secondary" onPress={() => setValue('Blah')}>
           <Text>Blah</Text>
         </Button>