Fix positioning of search results at mobile breakpoint on homepage

gatsbyjs · Feb 5, 2018 · 032f35b · 032f35b
1 parent e29d650
commit 032f35b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
@@ -24,6 +24,10 @@ css.insert(`
     box-shadow: 0 3px 10px 0.05rem ${hex2rgba(colors.lilac, 0.25)} !important;
   }
 
+  .is-homepage .algolia-autocomplete .ds-dropdown-menu {
+    top: ${rhythm(2.5)} !important;
+  }
+
   /* .searchWrap to beat docsearch.css' !important */
   .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
   .searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
@@ -193,6 +197,7 @@ css.insert(`
   }
 
   @media ${presets.tablet} {
+    .is-homepage .algolia-autocomplete .ds-dropdown-menu,
     .algolia-autocomplete .ds-dropdown-menu {
       top: 100% !important;
       position: absolute !important;

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -68,7 +68,7 @@ class DefaultLayout extends React.Component {
     }
 
     return (
-      <div>
+      <div className={isHomepage && `is-homepage`}>
         <Helmet defaultTitle={`GatsbyJS`} titleTemplate={`%s | GatsbyJS`}>
           <meta name="twitter:site" content="@gatsbyjs" />
           <meta name="og:type" content="website" />