Autocomplete Fullscreen on Desktop

@media (min-width: 767px) {
  .findify-container.findify-autocomplete {
      width: 100%!important;
      left: 0!important;
  }
  
  .findify-layouts--autocomplete--dropdown {
    width: 100%!important;
  }
}

// ... some code ...

<ItemsList
      wrapper={Grid}
			// adjust columns to display as many products per row as you'd like
			// e.g. 12/1 as a default setting  would display one product per row, 12/4 would display 4 products per row
      columns={String(12 / 4)}
      columnClass={theme.gridColumnClass}
      className={className}
      limit={config.getIn(['meta', 'item_limit'])}
      factory={(props) => productCardFactory({...props, columnClass, config, theme })}
      />
     
// ... some code ...

<Image
  className={classNames(theme.image)}
  // There are two aspectRatio settings, "0" would display the Image component as an actual <img> element, whereas "1" would use a <div> with a background image. For this example to work we will set aspectRatio to "0".
  aspectRatio={0}
  thumbnail={item.get('thumbnail_url')}
  // The autocomplete uses a thumbnail_url from the response. Here we can adjust the size of the image for a better quality. For example we could replace the default image size of "small" to be "233x233".
  src={item.get('image_url') || item.get('thumbnail_url').replace('_small', '_233x233')}
  alt={item.get('title')}
 />

/* let's remove this styles to not have a border bottom anymore */
@remove .findify-components-autocomplete--product-matches__grid-column-class:not(:last-child):after;

/* change the image to be displayed on top instead of next to the product description  */
.findify-components-autocomplete--product-matches__product-card .findify-components-autocomplete--product-matches__imageWrap {
    display: block;
}

/* remove width of the image so it will fill the container  */
.findify-components-autocomplete--product-matches__product-card .findify-components-autocomplete--product-matches__image {
    width: unset;
}

/* removes the padding of the product matches container */
.findify-layouts--autocomplete--dropdown__product-matches-container > .findify-components-autocomplete--product-matches {
    padding: 0;
}

/* add some padding to the product cards in the autocomplete */
.findify-components-autocomplete--product-matches__product-card {
  padding: 5px;
}

// ... some code ...

const AutocompleteDropdownView: React.SFC<IAutocompleteDropdownProps> = ({
  config,
  theme,
  meta,
  suggestions,
  position,
  innerRef,
  closeAutocomplete,
  ...rest
}: IAutocompleteDropdownProps) =>
<div display-if={suggestions && suggestions.size > 0} className={theme.wrapper}>
  <div className={theme.overlay} display-if={config.get('showOverlay')} onClick={closeAutocomplete}></div>
  <div
    className={theme.root}
    data-findify-autocomplete={true}
    tabIndex={0}
    ref={innerRef}
    style={{ [position]: 0 }}>
    // add <div> here
    <div onClick={closeAutocomplete} class="findify-close-autocomplete">x</div>
    <Tip
      className={theme.tip}
      title={config.getIn(['i18n', 'tipResults'])}
      widgetKey={config.get('widgetKey')} />
    <div className={theme.container}>
      <SearchOrZero
        theme={theme}
        meta={meta}
        config={config}
        suggestions={suggestions}
        {...rest} />
    </div>
  </div>
</div>

export default AutocompleteDropdownView;

.findify-close-autocomplete {
  position: absolute;
  right: 60px;
  top: 5px;
  font-size: 25px; 
  cursor: pointer;
}