Fix hidden "Powered by Google" text in Mobile Safari

src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js

@@ -1,5 +1,6 @@
 import React from 'react';
 // import { types as sdkTypes } from '../../util/sdkLoader';
+import classNames from 'classnames';
 import { getPlacePredictions, getPlaceDetails, locationBounds } from '../../util/googleMaps';
 import { userLocation } from '../../util/maps';
 import css from './LocationAutocompleteInput.css';
@@ -37,7 +38,11 @@ export const defaultPredictions = [
 // When displaying data from the Google Maps Places API, and
 // attribution is required next to the results.
 // See: https://developers.google.com/places/web-service/policies#powered
-export const GeocoderAttribution = () => <div className={css.poweredByGoogle} />;
+export const GeocoderAttribution = props => {
+  const { rootClassName, className } = props;
+  const classes = classNames(rootClassName || css.poweredByGoogle, className);
+  return <div className={classes} />;
+};
 
 /**
  * A forward geocoding (place name -> coordinates) implementation

src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js

@@ -37,6 +37,7 @@ const LocationPredictionsList = props => {
   const {
     rootClassName,
     className,
+    attributionClassName,
     predictions,
     geocoder,
     highlightedIndex,
@@ -81,7 +82,7 @@ const LocationPredictionsList = props => {
   return (
     <div className={classes}>
       <ul className={css.predictions}>{predictions.map(item)}</ul>
-      <GeocoderAttribution />
+      <GeocoderAttribution className={attributionClassName} />
     </div>
   );
 };
@@ -89,12 +90,14 @@ const LocationPredictionsList = props => {
 LocationPredictionsList.defaultProps = {
   rootClassName: null,
   className: null,
+  attributionClassName: null,
   highlightedIndex: null,
 };
 
 LocationPredictionsList.propTypes = {
   rootClassName: string,
   className: string,
+  attributionClassName: string,
   predictions: arrayOf(object).isRequired,
   geocoder: object.isRequired,
   highlightedIndex: number,
@@ -391,6 +394,7 @@ class LocationAutocompleteInputImpl extends Component {
       iconClassName,
       inputClassName,
       predictionsClassName,
+      predictionsAttributionClassName,
       validClassName,
       placeholder,
       input,
@@ -451,6 +455,7 @@ class LocationAutocompleteInputImpl extends Component {
         {renderPredictions ? (
           <LocationPredictionsList
             rootClassName={predictionsClass}
+            attributionClassName={predictionsAttributionClassName}
             predictions={predictions}
             geocoder={this.geocoder}
             highlightedIndex={this.state.highlightedIndex}
@@ -472,6 +477,7 @@ LocationAutocompleteInputImpl.defaultProps = {
   iconClassName: null,
   inputClassName: null,
   predictionsClassName: null,
+  predictionsAttributionClassName: null,
   validClassName: null,
   placeholder: '',
   meta: null,
@@ -486,6 +492,7 @@ LocationAutocompleteInputImpl.propTypes = {
   iconClassName: string,
   inputClassName: string,
   predictionsClassName: string,
+  predictionsAttributionClassName: string,
   validClassName: string,
   placeholder: string,
   input: shape({

src/forms/TopbarSearchForm/TopbarSearchForm.css

@@ -140,6 +140,13 @@
   z-index: var(--zIndexPopup + 1);
 }
 
+.mobilePredictionsAttribution {
+  /* When using the Google Maps Places geocoder, the "Powered by Google"
+   text is hidden in Mobile Safari without giving some extra space to
+   it. */
+  margin-bottom: 100px;
+}
+
 .desktopPredictions {
   position: absolute;
   width: 100%;

src/forms/TopbarSearchForm/TopbarSearchForm.js

@@ -67,6 +67,9 @@ class TopbarSearchFormComponent extends Component {
                       predictionsClassName={
                         isMobile ? css.mobilePredictions : css.desktopPredictions
                       }
+                      predictionsAttributionClassName={
+                        isMobile ? css.mobilePredictionsAttribution : null
+                      }
                       placeholder={intl.formatMessage({ id: 'TopbarSearchForm.placeholder' })}
                       closeOnBlur={!isMobile}
                       inputRef={node => {