diff --git a/UNRELEASED.md b/UNRELEASED.md
index 156d511175c..c5591f6b24e 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -10,6 +10,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Adjusted search results overlay to take up 100% height of the screen on small screens and to match the width of the search bar on large screens. ([#2103](https://github.com/Shopify/polaris-react/pull/2103))
 - Added skipToContentTarget prop to Frame component ([#2080](https://github.com/Shopify/polaris-react/pull/2080))
 
 ### Bug fixes
diff --git a/src/components/TopBar/_variables.scss b/src/components/TopBar/_variables.scss
index 2e9453492d0..40c436ecad7 100644
--- a/src/components/TopBar/_variables.scss
+++ b/src/components/TopBar/_variables.scss
@@ -3,6 +3,8 @@ $stacking-order: (
   search: 20,
 );
 
+$search-max-width: rem(694px);
+
 // TODO: Replace `$large-width` breakpoints with
 // `page-content-when-not-partially-condensed`
 // Once the frame is rendering our React routes
diff --git a/src/components/TopBar/components/Search/Search.scss b/src/components/TopBar/components/Search/Search.scss
index e3a6d4a1fc6..e6be42f2f18 100644
--- a/src/components/TopBar/components/Search/Search.scss
+++ b/src/components/TopBar/components/Search/Search.scss
@@ -2,7 +2,6 @@
 @import '../../variables';
 
 $page-layout-when-not-partially-condensed-absolute: rem(743px);
-$search-results-max-width: 70rem;
 $search-results-min-width: 45rem;
 
 .Search {
@@ -11,7 +10,7 @@ $search-results-min-width: 45rem;
   left: 0;
   right: 0;
   top: top-bar-height();
-  height: calc(100vh - #{top-bar-height() + spacing(loose)});
+  height: calc(100vh - #{top-bar-height()});
   visibility: hidden;
   pointer-events: none;
   padding: 0;
@@ -37,7 +36,7 @@ $search-results-min-width: 45rem;
   flex-direction: column;
   align-items: stretch;
   width: 100%;
-  max-width: $search-results-max-width;
+  max-width: $search-max-width;
   min-width: $search-results-min-width;
   max-height: 100%;
 
diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss
index 9811f968b20..76a1005f25d 100644
--- a/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/src/components/TopBar/components/SearchField/SearchField.scss
@@ -19,7 +19,7 @@ $stacking-order: (
   align-items: center;
   border: 1px solid transparent;
   width: 100%;
-  max-width: rem(694px);
+  max-width: $search-max-width;
 }
 
 // We have both a focused class and a focus pseudo selector here