From 965a22e184b9c8449239e57bd334f28f9041318d Mon Sep 17 00:00:00 2001
From: Sylvain Bellone <sylvain.bellone@algolia.com>
Date: Tue, 2 Mar 2021 12:47:06 +0100
Subject: [PATCH 1/5] fix: upgrade to autocomplete alpha 44 and fix CSS color
 issues

---
 frontend/package.json                        |   4 +-
 frontend/src/AutocompleteWrapper.ts          |   5 +-
 frontend/src/autocomplete-theme-classic.scss | 230 ++++++++++++++-----
 frontend/src/index.scss                      |  41 ++--
 yarn.lock                                    |  54 ++---
 5 files changed, 221 insertions(+), 113 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 148b9a5b6..21be632d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,8 +18,8 @@
     "postinstall": "[ -d dist/ ] || npm run build"
   },
   "devDependencies": {
-    "@algolia/autocomplete-js": "1.0.0-alpha.41",
-    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.43",
+    "@algolia/autocomplete-js": "1.0.0-alpha.44",
+    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
     "@algolia/transporter": "4.8.5",
     "@babel/core": "7.12.10",
     "@babel/preset-env": "7.12.11",
diff --git a/frontend/src/AutocompleteWrapper.ts b/frontend/src/AutocompleteWrapper.ts
index 450a78e39..b48e51124 100644
--- a/frontend/src/AutocompleteWrapper.ts
+++ b/frontend/src/AutocompleteWrapper.ts
@@ -1,4 +1,5 @@
 import type { SearchClient } from 'algoliasearch/lite';
+import type { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
 
 import algoliasearch from 'algoliasearch/lite';
 import type { Hit } from '@algolia/client-search';
@@ -75,7 +76,7 @@ class AutocompleteWrapper {
     return client;
   }
 
-  private getSources(): AutocompleteSource<AlgoliaRecord> {
+  private getSources(): AutocompleteSource<HighlightedHit<AlgoliaRecord>> {
     const poweredBy = this.options.poweredBy;
     return {
       sourceId: 'algoliaHits',
@@ -128,7 +129,7 @@ class AutocompleteWrapper {
 
     const theme = this.options.theme;
     this.$themeNode = addCss(
-      `.aa-Autocomplete, .aa-Panel {
+      `.aa-Autocomplete, .aa-Panel, .aa-DetachedContainer {
       ${theme.mark && `--color-mark: ${theme.mark};`}
       ${theme.mark && `--color-background: ${theme.background};`}
       ${theme.mark && `--color-selected: ${theme.selected};`}
diff --git a/frontend/src/autocomplete-theme-classic.scss b/frontend/src/autocomplete-theme-classic.scss
index 063781fa5..8c2d7bfe3 100644
--- a/frontend/src/autocomplete-theme-classic.scss
+++ b/frontend/src/autocomplete-theme-classic.scss
@@ -18,8 +18,14 @@
   --aa-text-color: rgb(38, 38, 39);
   --aa-content-text-color: rgb(38, 38, 39, 0.7);
   --aa-background-color: rgb(255, 255, 255);
+  --aa-background-color-alpha-0: rgba(255, 255, 255, 0);
   --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
   0 6px 16px -4px rgba(35, 38, 59, 0.15);
+  --aa-panel-max-height: 500px;
+  --aa-detached-media-query: (max-width: 500px);
+  --aa-detached-modal-media-query: (min-width: 500px);
+  --aa-detached-modal-max-width: 500px;
+  --aa-detached-modal-max-height: 500px;
 }
 
 // ----------------
@@ -46,7 +52,7 @@ body {
 // Autocomplete
 // ----------------
 .aa-Autocomplete,
-.aa-TouchFormContainer {
+.aa-DetachedFormContainer {
   font-size: var(--aa-font-size);
   line-height: 1em;
   text-align: left;
@@ -63,7 +69,6 @@ body {
     border: 1px solid var(--aa-muted-color);
     border-radius: 3px;
     display: flex;
-    line-height: 1em;
     padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half);
     position: relative;
     width: 100%;
@@ -138,7 +143,7 @@ body {
       display: flex;
       order: 4;
       // accelerator to clear the query
-      .aa-ResetButton {
+      .aa-ClearButton {
         align-items: center;
         background: none;
         border: 0;
@@ -164,6 +169,7 @@ body {
 // ----------------
 // Panel
 // ----------------
+
 .aa-Panel {
   position: absolute;
   // reset
@@ -177,44 +183,49 @@ body {
     background: none;
     border: 0;
   }
-  &.aa-Panel--desktop {
-    .aa-PanelLayout {
-      background-color: var(--aa-background-color);
-      border-radius: 3px;
-      box-shadow: var(--aa-panel-shadow);
-      margin-top: var(--aa-spacing-half);
-      overflow: hidden;
-      padding-bottom: var(--aa-spacing-half);
-      padding-top: var(--aa-spacing-half);
-      text-align: left;
-      .aa-PanelLayoutResults {
-        overflow-y: scroll;
-        width: 50%;
-      }
-      .aa-PanelLayoutPreview {
-        border-left: solid 1px var(--aa-selected-color);
-        flex-shrink: 1;
-        max-width: 50%;
-        overflow: hidden;
-      }
-    }
+
+  &::after {
+    background-image: linear-gradient(
+      var(--aa-background-color-alpha-0),
+      var(--aa-background-color)
+    );
+    border-radius: 3px;
+    bottom: 0;
+    content: '';
+    height: 0.75em;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    z-index: 99;
   }
-  &.aa-Panel--touch {
-    left: var(--aa-spacing-half);
+  .aa-PanelLayout {
+    background-color: var(--aa-background-color);
+    border-radius: 3px;
+    box-shadow: var(--aa-panel-shadow);
+    height: 100%;
+    margin-top: var(--aa-spacing-half);
+    max-height: var(--aa-panel-max-height);
+    padding-bottom: var(--aa-spacing-half);
     padding-top: var(--aa-spacing-half);
-    right: var(--aa-spacing-half);
+    position: relative;
+    text-align: left;
 
-    .aa-TouchOnly {
-      display: none;
-    }
-    .aa-Item {
-      border-radius: 3px;
-      padding: 0;
+    .aa-PanelLayoutResults {
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 50%;
     }
-    .aa-SourceHeader {
-      margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+    .aa-PanelLayoutPreview {
+      border-left: solid 1px var(--aa-selected-color);
+      flex-shrink: 1;
+      max-width: 50%;
+      overflow: hidden;
     }
   }
+  .aa-Panel--Scrollable {
+    overflow-y: auto;
+  }
+
   // when a query isn't resolved yet
   &.aa-Panel--stalled {
     filter: grayscale(1);
@@ -230,6 +241,7 @@ body {
 // Each source can be styled independently
 // ----------------
 .aa-Source {
+  position: relative;
   width: 100%;
   // source title
   .aa-SourceHeader {
@@ -265,6 +277,9 @@ body {
       display: none;
     }
   }
+  .aa-SourceNoResults {
+    padding: var(--aa-spacing);
+  }
   &:empty {
     // hide empty section
     display: none;
@@ -274,6 +289,7 @@ body {
     list-style: none;
     margin: 0;
     padding: 0;
+    position: relative;
   }
 }
 
@@ -285,23 +301,22 @@ body {
   color: var(--aa-text-color);
   cursor: pointer;
   display: flex;
-  height: 100%;
+  //height: 100%;
   line-height: 1.1em;
   padding: 0 var(--aa-spacing-half);
-
   .aa-ActiveOnly {
     visibility: hidden;
   }
   // when the result is active
   &[aria-selected='true'] {
     background-color: var(--aa-selected-color);
-
     .aa-ItemActionButton,
     .aa-ActiveOnly {
       visibility: visible;
     }
   }
   // wrap hit with url but we don't need to see it
+  .aa-ItemWrapper,
   .aa-ItemLink {
     align-items: center;
     color: inherit;
@@ -309,6 +324,10 @@ body {
     text-decoration: none;
     width: 100%;
   }
+  .aa-ItemLink {
+    color: inherit;
+    text-decoration: none;
+  }
   // the result type icon inlined svg or img
   .aa-ItemIcon {
     align-items: center;
@@ -325,14 +344,19 @@ body {
     stroke-width: var(--aa-icon-stroke-width);
     text-align: center;
     width: calc(var(--aa-icon-size) + var(--aa-spacing));
+    &.aa-ItemIcon--align-top {
+      align-self: flex-start;
+    }
     &.aa-ItemIcon--no-border {
       background: none;
       box-shadow: none;
       margin: 0 var(--aa-spacing-half) 0 2px;
     }
     img {
-      height: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
-      width: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
+      height: auto;
+      max-height: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
+      max-width: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
+      width: auto;
     }
     svg {
       height: var(--aa-icon-size);
@@ -354,20 +378,25 @@ body {
     }
     .aa-ItemContentTitle {
       display: inline-block;
+      line-height: 1.25em;
       max-width: 100%;
-      overflow-x: hidden;
+      overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .aa-ItemContentSubtitle {
-      color: var(--aa-muted-color);
+      color: var(--aa-content-text-color);
       display: inline-block;
-      font-size: 0.75em;
+      font-size: 0.92em;
       margin-top: -2px;
       max-width: 100%;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      &::before {
+        content: ' ';
+        white-space: pre;
+      }
       &:empty {
         display: none;
       }
@@ -412,6 +441,9 @@ body {
     }
   }
   // secondary click action
+  .aa-ItemActions {
+    display: flex;
+  }
   .aa-ItemActionButton {
     align-items: center;
     background: none;
@@ -438,9 +470,9 @@ body {
 }
 
 //----------------
-// Touch
+// Detached
 //----------------
-.aa-TouchSearchButton {
+.aa-DetachedSearchButton {
   align-items: center;
   background-color: var(--aa-background-color);
   border: 1px solid var(--aa-muted-color);
@@ -453,9 +485,16 @@ body {
   padding: 0 var(--aa-spacing-half);
   position: relative;
   text-align: left;
-  .aa-TouchSearchButtonIcon {
+  width: 100%;
+  &:focus {
+    border-color: var(--aa-primary-color);
+    box-shadow: var(--aa-selected-color) 0 0 0 3px,
+    inset var(--aa-selected-color) 0 0 0 2px;
+    outline: currentColor none medium;
+  }
+  .aa-DetachedSearchButtonIcon {
     align-items: center;
-    color: var(--aa-icon-color);
+    color: var(--aa-primary-color);
     cursor: initial;
     display: flex;
     height: 100%;
@@ -463,26 +502,99 @@ body {
   }
 }
 
-.aa-TouchOverlay {
-  backdrop-filter: blur(16px);
+.aa-DetachedContainer {
   background: var(--aa-background-color);
   bottom: 0;
+  display: flex;
+  flex-direction: column;
   left: 0;
-  padding: var(--aa-spacing-half);
+  overflow: hidden;
+  padding: 0;
   position: fixed;
   right: 0;
   top: 0;
-  .aa-TouchFormContainer {
+  z-index: 1000;
+
+  .aa-DetachedFormContainer {
+    border-bottom: solid 1px var(--aa-selected-color);
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
+    padding: var(--aa-spacing-half);
+    .aa-Form {
+      padding: 0 var(--aa-spacing-half) 0 0;
+    }
+    .aa-DetachedCancelButton {
+      background: none;
+      border: 0;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      padding: 0 0 0 var(--aa-spacing-half);
+    }
   }
-  .aa-TouchCancelButton {
-    background: none;
-    border: 0;
-    color: inherit;
-    cursor: pointer;
-    font-size: inherit;
-    padding: 0;
-    padding-left: var(--aa-spacing-half);
+  .aa-Panel {
+    background-color: var(--aa-background-color);
+    overflow: hidden;
+    position: relative;
+    .aa-PanelLayout {
+      box-shadow: none;
+      height: 100%;
+      margin: 0;
+      max-height: none;
+      overflow-y: auto;
+      padding: 0;
+      padding: 6px var(--aa-spacing-half) 80px;
+      width: 100%;
+    }
+
+    .aa-Item {
+      border-radius: 3px;
+      padding: 0;
+    }
+    .aa-SourceHeader {
+      margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
+    }
+  }
+  &::after {
+    height: 32px;
+  }
+
+  &.aa-DetachedContainer--Modal {
+    border-radius: 6px;
+    bottom: inherit;
+    height: auto;
+    margin: 0 auto;
+    max-width: var(--aa-detached-modal-max-width);
+    position: absolute;
+    top: 3%;
+    .aa-Panel {
+      .aa-PanelLayout {
+        max-height: var(--aa-detached-modal-max-height);
+        padding-bottom: var(--aa-spacing-half);
+      }
+    }
+  }
+}
+
+// remove scroll for body
+.aa-Detached {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.aa-DetachedOverlay {
+  background-color: var(--aa-muted-color);
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .aa-TouchOnly {
+    display: none !important; // TODO: fix specificity issue
   }
 }
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 16e76ee96..1acd409ae 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -23,7 +23,7 @@ $height: $size-xl;
 $height-icon: $size-l;
 $font-size: $font-size-m;
 
-.aa-Autocomplete, .aa-Panel {
+.aa-Autocomplete, .aa-Panel, .aa-DetachedContainer {
   --color-mark: #{$color-mark};
   --color-background: #{$color-bg};
   --color-selected: #{$color-bg-selected};
@@ -41,21 +41,22 @@ $font-size: $font-size-m;
   min-width: 350px;
   z-index: 1100;
 
-  &.aa-Panel--desktop {
-    .aa-PanelLayout {
-      margin-top: $size-xs;
-      padding-top: 0;
-      padding-bottom: 0;
-      background-color: var(--color-background);
+  &::after {
+    background-image: none;
+  }
+  .aa-PanelLayout {
+    margin-top: $size-xs;
+    padding-top: 0;
+    padding-bottom: 0;
+    background-color: var(--color-background);
 
-      .aa-PanelLayoutPreview {
-        border-left: solid 1px var(--color-selected);
-      }
+    .aa-PanelLayoutPreview {
+      border-left: solid 1px var(--color-selected);
     }
   }
 }
 
-.aa-Autocomplete, .aa-TouchFormContainer {
+.aa-Autocomplete, .aa-DetachedFormContainer {
   .aa-Form {
     height: var(--height);
     font-size: var(--font-size);
@@ -136,18 +137,24 @@ $font-size: $font-size-m;
   }
 }
 
-.aa-TouchOverlay {
-  z-index: 10;
+.aa-DetachedContainer {
+  background: var(--color-background);
 
-  .aa-TouchCancelButton {
-    color: var(--color-text);
+  .aa-DetachedFormContainer {
+    .aa-DetachedCancelButton {
+      color: var(--color-text);
+    }
   }
 }
 
-.aa-TouchSearchButton {
+.aa-DetachedOverlay {
+  z-index: 10;
+}
+
+.aa-DetachedSearchButton {
   background-color: var(--color-background);
 
-  .aa-TouchSearchButtonIcon {
+  .aa-DetachedSearchButtonIcon {
     color: var(--color-source-icon);
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 9ffd214b7..6dcef2833 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,46 +2,34 @@
 # yarn lockfile v1
 
 
-"@algolia/autocomplete-core@1.0.0-alpha.41":
-  version "1.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.41.tgz#c6d50118ff4493cb51e7787d73fea2fc505f7fac"
-  integrity sha512-yXrJ6bfweoUmFrfHvs6+XULJgf3mSz7Mh+LD+9wrN7xyt3z5CpKdXfNmBjJzpALYqd4kaFNhvDqeA6ka3QhlBA==
+"@algolia/autocomplete-core@1.0.0-alpha.44":
+  version "1.0.0-alpha.44"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.44.tgz#e626dba45f5f3950d6beb0ab055395ef0f7e8bb2"
+  integrity sha512-2iMXthldMIDXtlbg9omRKLgg1bLo2ZzINAEqwhNjUeyj1ceEyL1ck6FY0VnJpf2LsjmNthHCz2BuFk+nYUeDNA==
   dependencies:
-    "@algolia/autocomplete-shared" "1.0.0-alpha.41"
+    "@algolia/autocomplete-shared" "1.0.0-alpha.44"
 
-"@algolia/autocomplete-js@1.0.0-alpha.41":
-  version "1.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.41.tgz#b910f9f4ba5226119727e8bcd3b4e9b166170417"
-  integrity sha512-kqzv0LUrr1dVFOsN101VFhA5/QlKZR6CvDDxtGEEGUFiP7bwkIczpYF0HPGf14htuV/es4QYPXLChLzqe4wFaw==
+"@algolia/autocomplete-js@1.0.0-alpha.44":
+  version "1.0.0-alpha.44"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.44.tgz#a252bdbf7ab662dedcc05cfe53e318d6becd7bee"
+  integrity sha512-KmWhIvO/T5yS+kelZQrVMgAGKZKozoFHQM8VMrXK3a77i1uqTYFkg70HFIsiQ9kRGjB/EA0exNtm3/BwGkIIkw==
   dependencies:
-    "@algolia/autocomplete-core" "1.0.0-alpha.41"
-    "@algolia/autocomplete-preset-algolia" "1.0.0-alpha.41"
-    "@algolia/autocomplete-shared" "1.0.0-alpha.41"
+    "@algolia/autocomplete-core" "1.0.0-alpha.44"
+    "@algolia/autocomplete-preset-algolia" "1.0.0-alpha.44"
+    "@algolia/autocomplete-shared" "1.0.0-alpha.44"
     preact "^10.0.0"
 
-"@algolia/autocomplete-preset-algolia@1.0.0-alpha.41":
-  version "1.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.41.tgz#cd5b6d91b8146380aa6e8f8d105df4cb98a3b86f"
-  integrity sha512-vuFlPM61s6ovOEyxapGDw66QnZ97Hn2ZyzJmUQcDEPc9NY/haWomkugHBr5njPx+JN1rK1mak3mfgH6Va3RxQQ==
+"@algolia/autocomplete-preset-algolia@1.0.0-alpha.44":
+  version "1.0.0-alpha.44"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.44.tgz#0ea0b255d0be10fbe262e281472dd6e4619b62ba"
+  integrity sha512-DCHwo5ovzg9k2ejUolGNTLFnIA7GpsrkbNJTy1sFbMnYfBmeK8egZPZnEl7lBTr27OaZu7IkWpTepLVSztZyng==
   dependencies:
-    "@algolia/autocomplete-shared" "1.0.0-alpha.41"
+    "@algolia/autocomplete-shared" "1.0.0-alpha.44"
 
-"@algolia/autocomplete-preset-algolia@1.0.0-alpha.43":
-  version "1.0.0-alpha.43"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.43.tgz#f36b40c99706f3f9576779da8f678b79c199d15f"
-  integrity sha512-NnjzTpuiSPgOHkkEQ9bd08XrD+iFbQ9VA0RGNSFqVlCwFQ71GZnQtu/C2ofQuQFDZmY3d7QmLKR6Tkgg6TJKlw==
-  dependencies:
-    "@algolia/autocomplete-shared" "1.0.0-alpha.43"
-
-"@algolia/autocomplete-shared@1.0.0-alpha.41":
-  version "1.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.41.tgz#594ea0423d6f7b6ad68a131c6bbd701d2499849d"
-  integrity sha512-8sI2pLoQoYb/8CiwaOy/fha0V7DedfZpruOFQHTaqVF0HG5kiKmw+IFTW4jpS+vyjKV7b2QZp3OnKGln3t5fBQ==
-
-"@algolia/autocomplete-shared@1.0.0-alpha.43":
-  version "1.0.0-alpha.43"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.43.tgz#e02a3f2e81171835351f8a782f471d445623fbfa"
-  integrity sha512-WS07SRi4HyIQwc4tJEr0UDXB58TV5ntAzVSLFtS7wi0a/yfmXfXRM452P3Yfw4yAAbE3b8WGZkjddwDAZ0dtSw==
+"@algolia/autocomplete-shared@1.0.0-alpha.44":
+  version "1.0.0-alpha.44"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.44.tgz#db13902ad1667e455711b77d08cae1a0feafaa48"
+  integrity sha512-2oQZPERYV+yNx/yoVWYjZZdOqsitJ5dfxXJjL18yczOXH6ujnsq+DTczSrX+RjzjQdVeJ1UAG053EJQF/FOiMg==
 
 "@algolia/cache-browser-local-storage@4.8.5":
   version "4.8.5"

From 5fb6f08858b322ff0b4c41987b99729cd426bee4 Mon Sep 17 00:00:00 2001
From: Sylvain Bellone <sylvain.bellone@algolia.com>
Date: Tue, 2 Mar 2021 12:58:26 +0100
Subject: [PATCH 2/5] Expose detachedMediaQuery option

---
 frontend/README.md                  | 5 +++--
 frontend/src/AutocompleteWrapper.ts | 1 +
 frontend/src/types/options.ts       | 1 +
 public/index.html                   | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 5f6d458a0..2ab7837bb 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -41,8 +41,9 @@ algoliasearchNetlify({
   analytics: true,                              // Enable search analytics
   hitsPerPage: 5,                               // Amount of results to display
   poweredBy: true,                              // Controls displaying the logo (mandatory with our FREE plan)
-  placeholder: 'Search...';                     // Input placeholder
-  openOnFocus: true;                            // Open search panel with default search, when focusing input
+  placeholder: 'Search...',                     // Input placeholder
+  openOnFocus: true,                            // Open search panel with default search, when focusing input
+  detachedMediaQuery: '(max-width: 500px)',     // Media query to determine when the search popup should open in detached mode (full screen, modal experience). Set to 'none' to never go in detached mode.
 
   // Theme
   theme: {
diff --git a/frontend/src/AutocompleteWrapper.ts b/frontend/src/AutocompleteWrapper.ts
index b48e51124..86a85fac5 100644
--- a/frontend/src/AutocompleteWrapper.ts
+++ b/frontend/src/AutocompleteWrapper.ts
@@ -49,6 +49,7 @@ class AutocompleteWrapper {
       debug: this.options.debug,
       openOnFocus: this.options.openOnFocus,
       panelPlacement: 'input-wrapper-width',
+      detachedMediaQuery: this.options.detachedMediaQuery,
       getSources: () => {
         return [this.getSources()];
       },
diff --git a/frontend/src/types/options.ts b/frontend/src/types/options.ts
index ef3b06c6b..c6c7c27f1 100644
--- a/frontend/src/types/options.ts
+++ b/frontend/src/types/options.ts
@@ -17,6 +17,7 @@ export interface Options {
     colorSourceIcon?: string;
   };
   debug?: boolean;
+  detachedMediaQuery?: string;
   placeholder?: string;
   openOnFocus?: boolean;
   poweredBy?: boolean;
diff --git a/public/index.html b/public/index.html
index 92e37183c..cbc607d7e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -169,7 +169,7 @@ <h2>Test content</h2>
           selector: '#searchSmall',
           siteId: '9209706f-d5b7-46e2-bb88-5d6bedd2823f',
           branch: 'master',
-          placeholder: 'Small Input',
+          placeholder: 'Detached Input',
           poweredBy: false,
           theme: {
             mark: '#fff',
@@ -178,6 +178,7 @@ <h2>Test content</h2>
             text: '#d6d6e7',
             colorSourceIcon: '#d6d6e7'
           },
+          detachedMediaQuery: '',
         });`
       .split('\n')
       .map((l) => l.replace(/^\s{8}/, ''))

From 8aff4b947e0ca826f0ed4f1dba6deda4060ddfcd Mon Sep 17 00:00:00 2001
From: Sylvain Bellone <sylvain.bellone@algolia.com>
Date: Tue, 2 Mar 2021 19:09:34 +0100
Subject: [PATCH 3/5] Import autocomplete-theme-classic

---
 frontend/package.json                        |   1 +
 frontend/src/autocomplete-theme-classic.scss | 600 -------------------
 frontend/src/index.scss                      |   4 +-
 yarn.lock                                    |   5 +
 4 files changed, 8 insertions(+), 602 deletions(-)
 delete mode 100644 frontend/src/autocomplete-theme-classic.scss

diff --git a/frontend/package.json b/frontend/package.json
index 21be632d4..37a19b76e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@algolia/autocomplete-js": "1.0.0-alpha.44",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
     "@algolia/transporter": "4.8.5",
     "@babel/core": "7.12.10",
     "@babel/preset-env": "7.12.11",
diff --git a/frontend/src/autocomplete-theme-classic.scss b/frontend/src/autocomplete-theme-classic.scss
deleted file mode 100644
index 8c2d7bfe3..000000000
--- a/frontend/src/autocomplete-theme-classic.scss
+++ /dev/null
@@ -1,600 +0,0 @@
-// Copied from https://raw.githubusercontent.com/algolia/autocomplete.js/next/packages/autocomplete-theme-classic/src/theme.scss
-
-// ----------------
-// Variables
-// ----------------
-:root {
-  --aa-base-unit: 16;
-  --aa-font-size: calc(var(--aa-base-unit) * 1px);
-  --aa-spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5
-  --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);
-  --aa-spacing-half: calc(var(--aa-spacing) / 2);
-  --aa-icon-size: 18px;
-  --aa-icon-stroke-width: calc((20 / var(--aa-base-unit)) * 1.6);
-  --aa-primary-color: rgb(62, 52, 211);
-  --aa-muted-color: rgba(128, 126, 163, 0.6);
-  --aa-selected-color: rgba(62, 52, 211, 0.1);
-  --aa-icon-color: rgb(119, 119, 163);
-  --aa-text-color: rgb(38, 38, 39);
-  --aa-content-text-color: rgb(38, 38, 39, 0.7);
-  --aa-background-color: rgb(255, 255, 255);
-  --aa-background-color-alpha-0: rgba(255, 255, 255, 0);
-  --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
-  0 6px 16px -4px rgba(35, 38, 59, 0.15);
-  --aa-panel-max-height: 500px;
-  --aa-detached-media-query: (max-width: 500px);
-  --aa-detached-modal-media-query: (min-width: 500px);
-  --aa-detached-modal-max-width: 500px;
-  --aa-detached-modal-max-height: 500px;
-}
-
-// ----------------
-// Darkmode
-// ----------------
-body {
-  /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
-  &[data-theme='dark'],
-  &.dark {
-    --aa-primary-color: rgb(93, 85, 213);
-    --aa-muted-color: rgba(93, 85, 213, 0.6);
-    --aa-selected-color: rgba(93, 85, 213, 0.25);
-    --aa-icon-color: rgb(119, 119, 163);
-    --aa-text-color: rgb(183, 192, 199);
-    --aa-content-text-color: rgb(183, 192, 199, 0.8);
-    --aa-background-color: rgb(21, 24, 42);
-    --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
-    0 3px 8px 0 rgb(0, 3, 9);
-  }
-  /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */
-}
-
-// ----------------
-// Autocomplete
-// ----------------
-.aa-Autocomplete,
-.aa-DetachedFormContainer {
-  font-size: var(--aa-font-size);
-  line-height: 1em;
-  text-align: left;
-  // reset
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  // searchbox
-  .aa-Form {
-    align-items: center;
-    background-color: var(--aa-background-color);
-    border: 1px solid var(--aa-muted-color);
-    border-radius: 3px;
-    display: flex;
-    padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half);
-    position: relative;
-    width: 100%;
-    &:focus-within {
-      border-color: var(--aa-primary-color);
-      box-shadow: var(--aa-selected-color) 0 0 0 3px,
-      inset var(--aa-selected-color) 0 0 0 2px;
-      outline: currentColor none medium;
-    }
-    .aa-InputWrapperPrefix {
-      align-items: center;
-      display: flex;
-      flex-shrink: 0;
-      flex-wrap: none;
-      order: 1;
-      padding-right: var(--aa-spacing-half);
-      // container for search and loading icons
-      .aa-Label,
-      .aa-LoadingIndicator {
-        cursor: initial;
-        flex-shrink: 0;
-        text-align: center;
-        width: calc(var(--aa-spacing) + var(--aa-icon-size));
-        button {
-          appearance: none;
-          background: none;
-          border: 0;
-        }
-        svg {
-          color: var(--aa-primary-color);
-          left: 2px;
-          position: relative;
-          stroke-width: var(--aa-icon-stroke-width);
-          width: 20px;
-        }
-      }
-    }
-    .aa-InputWrapper {
-      order: 3;
-      position: relative;
-      width: 100%;
-      // input of the searchbox, where the placeholder and query appear
-      .aa-Input {
-        appearance: none;
-        background: none;
-        border: 0;
-        color: var(--aa-text-color);
-        font: inherit;
-        height: calc(var(--aa-spacing) * 2.5);
-        width: 100%;
-        // remove native appearence
-        &::-webkit-search-decoration,
-        &::-webkit-search-cancel-button,
-        &::-webkit-search-results-button,
-        &::-webkit-search-results-decoration {
-          appearance: none;
-        }
-        &::placeholder {
-          color: var(--aa-muted-color);
-          opacity: 1;
-        }
-        // remove focus effect as we moved it to parent wrapper
-        &:focus {
-          border-color: none;
-          box-shadow: none;
-          outline: none;
-        }
-      }
-    }
-    .aa-InputWrapperSuffix {
-      align-items: center;
-      display: flex;
-      order: 4;
-      // accelerator to clear the query
-      .aa-ClearButton {
-        align-items: center;
-        background: none;
-        border: 0;
-        color: var(--aa-muted-color);
-        cursor: pointer;
-        display: flex;
-        &[hidden] {
-          display: none;
-        }
-        &:hover,
-        &:focus {
-          color: var(--aa-text-color);
-        }
-        svg {
-          stroke-width: var(--aa-icon-stroke-width);
-          width: var(--aa-icon-size);
-        }
-      }
-    }
-  }
-}
-
-// ----------------
-// Panel
-// ----------------
-
-.aa-Panel {
-  position: absolute;
-  // reset
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  button {
-    appearance: none;
-    background: none;
-    border: 0;
-  }
-
-  &::after {
-    background-image: linear-gradient(
-      var(--aa-background-color-alpha-0),
-      var(--aa-background-color)
-    );
-    border-radius: 3px;
-    bottom: 0;
-    content: '';
-    height: 0.75em;
-    pointer-events: none;
-    position: absolute;
-    width: 100%;
-    z-index: 99;
-  }
-  .aa-PanelLayout {
-    background-color: var(--aa-background-color);
-    border-radius: 3px;
-    box-shadow: var(--aa-panel-shadow);
-    height: 100%;
-    margin-top: var(--aa-spacing-half);
-    max-height: var(--aa-panel-max-height);
-    padding-bottom: var(--aa-spacing-half);
-    padding-top: var(--aa-spacing-half);
-    position: relative;
-    text-align: left;
-
-    .aa-PanelLayoutResults {
-      overflow-x: hidden;
-      overflow-y: auto;
-      width: 50%;
-    }
-    .aa-PanelLayoutPreview {
-      border-left: solid 1px var(--aa-selected-color);
-      flex-shrink: 1;
-      max-width: 50%;
-      overflow: hidden;
-    }
-  }
-  .aa-Panel--Scrollable {
-    overflow-y: auto;
-  }
-
-  // when a query isn't resolved yet
-  &.aa-Panel--stalled {
-    filter: grayscale(1);
-    opacity: 0.8;
-    @media screen and (prefers-reduced-motion: reduce) {
-      transition: opacity 200ms ease-in;
-    }
-  }
-}
-
-// ----------------
-// Sources
-// Each source can be styled independently
-// ----------------
-.aa-Source {
-  position: relative;
-  width: 100%;
-  // source title
-  .aa-SourceHeader {
-    line-height: var(--aa-spacing);
-    margin: var(--aa-spacing-half) calc(var(--aa-spacing-half) + 2px);
-    position: relative;
-    // Title typography
-    .aa-SourceHeaderTitle {
-      background: var(--aa-background-color);
-      color: var(--aa-primary-color);
-      display: inline-block;
-      font-size: 0.8em;
-      font-weight: 600;
-      padding-right: var(--aa-spacing-half);
-      position: relative;
-      text-transform: capitalize;
-      z-index: 2;
-    }
-    // Line separator
-    .aa-SourceHeaderLine {
-      border-bottom: solid 1px var(--aa-primary-color);
-      display: block;
-      height: 2px;
-      left: 0;
-      opacity: 0.3;
-      position: absolute;
-      right: 0;
-      top: var(--aa-spacing-half);
-      z-index: 1;
-    }
-    // hide empty header
-    &:empty {
-      display: none;
-    }
-  }
-  .aa-SourceNoResults {
-    padding: var(--aa-spacing);
-  }
-  &:empty {
-    // hide empty section
-    display: none;
-  }
-  // list of results inside the source
-  .aa-List {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-  }
-}
-
-// ----------------
-// Hit Layout
-// ----------------
-.aa-Item {
-  align-items: center;
-  color: var(--aa-text-color);
-  cursor: pointer;
-  display: flex;
-  //height: 100%;
-  line-height: 1.1em;
-  padding: 0 var(--aa-spacing-half);
-  .aa-ActiveOnly {
-    visibility: hidden;
-  }
-  // when the result is active
-  &[aria-selected='true'] {
-    background-color: var(--aa-selected-color);
-    .aa-ItemActionButton,
-    .aa-ActiveOnly {
-      visibility: visible;
-    }
-  }
-  // wrap hit with url but we don't need to see it
-  .aa-ItemWrapper,
-  .aa-ItemLink {
-    align-items: center;
-    color: inherit;
-    display: flex;
-    text-decoration: none;
-    width: 100%;
-  }
-  .aa-ItemLink {
-    color: inherit;
-    text-decoration: none;
-  }
-  // the result type icon inlined svg or img
-  .aa-ItemIcon {
-    align-items: center;
-    background: #fff;
-    border-radius: 3px;
-    box-shadow: inset 0 0 0 1px var(--aa-selected-color);
-    color: var(--aa-icon-color);
-    display: flex;
-    flex-shrink: 0;
-    font-size: var(--aa-icon-size);
-    height: calc(var(--aa-icon-size) + var(--aa-spacing));
-    justify-content: center;
-    margin: 2px var(--aa-spacing-half) 2px 2px;
-    stroke-width: var(--aa-icon-stroke-width);
-    text-align: center;
-    width: calc(var(--aa-icon-size) + var(--aa-spacing));
-    &.aa-ItemIcon--align-top {
-      align-self: flex-start;
-    }
-    &.aa-ItemIcon--no-border {
-      background: none;
-      box-shadow: none;
-      margin: 0 var(--aa-spacing-half) 0 2px;
-    }
-    img {
-      height: auto;
-      max-height: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
-      max-width: calc(var(--aa-icon-size) + var(--aa-spacing) - 8px);
-      width: auto;
-    }
-    svg {
-      height: var(--aa-icon-size);
-      width: var(--aa-icon-size);
-    }
-  }
-  .aa-ItemContent {
-    color: var(--aa-text-color);
-    cursor: pointer;
-    flex-shrink: 1;
-    overflow: hidden;
-    padding: calc(var(--aa-spacing) / 4) 0;
-    width: 100%;
-    mark {
-      background: none;
-      color: var(--aa-text-color);
-      font-style: normal;
-      font-weight: bold;
-    }
-    .aa-ItemContentTitle {
-      display: inline-block;
-      line-height: 1.25em;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .aa-ItemContentSubtitle {
-      color: var(--aa-content-text-color);
-      display: inline-block;
-      font-size: 0.92em;
-      margin-top: -2px;
-      max-width: 100%;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &::before {
-        content: ' ';
-        white-space: pre;
-      }
-      &:empty {
-        display: none;
-      }
-      .aa-ItemContentDash {
-        color: var(--aa-muted-color);
-        display: none;
-        opacity: 0.4;
-      }
-      .aa-ItemContentTag {
-        background-color: var(--aa-selected-color);
-        border-radius: 3px;
-        margin-right: 0.4em;
-        padding: 0.08em 0.3em;
-      }
-    }
-    &.aa-ItemContent--dual {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: left;
-      .aa-ItemContentTitle,
-      .aa-ItemContentSubtitle {
-        display: block;
-      }
-    }
-    .aa-ItemContentDescription {
-      color: var(--aa-content-text-color);
-      font-size: 0.85em;
-      max-width: 100%;
-      overflow-x: hidden;
-      padding: 0.3em 0;
-      text-overflow: ellipsis;
-      mark {
-        background: rgba(245, 223, 77, 0.5);
-        color: var(--aa-text-color);
-        font-style: normal;
-        font-weight: 500;
-      }
-      &:empty {
-        display: none;
-      }
-    }
-  }
-  // secondary click action
-  .aa-ItemActions {
-    display: flex;
-  }
-  .aa-ItemActionButton {
-    align-items: center;
-    background: none;
-    border: 0;
-    color: var(--aa-muted-color);
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
-    &:hover svg,
-    &:focus svg {
-      color: var(--aa-text-color);
-    }
-    svg {
-      color: var(--aa-muted-color);
-      margin: 0 var(--aa-spacing-half);
-      stroke-width: var(--aa-icon-stroke-width);
-      width: var(--aa-icon-size);
-      &:hover,
-      &:focus {
-        color: var(--aa-text-color);
-      }
-    }
-  }
-}
-
-//----------------
-// Detached
-//----------------
-.aa-DetachedSearchButton {
-  align-items: center;
-  background-color: var(--aa-background-color);
-  border: 1px solid var(--aa-muted-color);
-  border-radius: 3px;
-  color: var(--aa-muted-color);
-  cursor: pointer;
-  display: flex;
-  font: inherit;
-  height: calc(var(--aa-spacing) * 2.5);
-  padding: 0 var(--aa-spacing-half);
-  position: relative;
-  text-align: left;
-  width: 100%;
-  &:focus {
-    border-color: var(--aa-primary-color);
-    box-shadow: var(--aa-selected-color) 0 0 0 3px,
-    inset var(--aa-selected-color) 0 0 0 2px;
-    outline: currentColor none medium;
-  }
-  .aa-DetachedSearchButtonIcon {
-    align-items: center;
-    color: var(--aa-primary-color);
-    cursor: initial;
-    display: flex;
-    height: 100%;
-    margin-right: var(--aa-spacing-half);
-  }
-}
-
-.aa-DetachedContainer {
-  background: var(--aa-background-color);
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  overflow: hidden;
-  padding: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 1000;
-
-  .aa-DetachedFormContainer {
-    border-bottom: solid 1px var(--aa-selected-color);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: var(--aa-spacing-half);
-    .aa-Form {
-      padding: 0 var(--aa-spacing-half) 0 0;
-    }
-    .aa-DetachedCancelButton {
-      background: none;
-      border: 0;
-      color: inherit;
-      cursor: pointer;
-      font: inherit;
-      padding: 0 0 0 var(--aa-spacing-half);
-    }
-  }
-  .aa-Panel {
-    background-color: var(--aa-background-color);
-    overflow: hidden;
-    position: relative;
-    .aa-PanelLayout {
-      box-shadow: none;
-      height: 100%;
-      margin: 0;
-      max-height: none;
-      overflow-y: auto;
-      padding: 0;
-      padding: 6px var(--aa-spacing-half) 80px;
-      width: 100%;
-    }
-
-    .aa-Item {
-      border-radius: 3px;
-      padding: 0;
-    }
-    .aa-SourceHeader {
-      margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
-    }
-  }
-  &::after {
-    height: 32px;
-  }
-
-  &.aa-DetachedContainer--Modal {
-    border-radius: 6px;
-    bottom: inherit;
-    height: auto;
-    margin: 0 auto;
-    max-width: var(--aa-detached-modal-max-width);
-    position: absolute;
-    top: 3%;
-    .aa-Panel {
-      .aa-PanelLayout {
-        max-height: var(--aa-detached-modal-max-height);
-        padding-bottom: var(--aa-spacing-half);
-      }
-    }
-  }
-}
-
-// remove scroll for body
-.aa-Detached {
-  height: 100vh;
-  overflow: hidden;
-}
-
-.aa-DetachedOverlay {
-  background-color: var(--aa-muted-color);
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 999;
-}
-
-@media (hover: none) and (pointer: coarse) {
-  .aa-TouchOnly {
-    display: none !important; // TODO: fix specificity issue
-  }
-}
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 1acd409ae..0149d93da 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -1,4 +1,4 @@
-@import 'autocomplete-theme-classic';
+@import '~@algolia/autocomplete-theme-classic';
 
 $color-bg: #fff;
 $color-muted: #969faf;
@@ -155,7 +155,7 @@ $font-size: $font-size-m;
   background-color: var(--color-background);
 
   .aa-DetachedSearchButtonIcon {
-    color: var(--color-source-icon);
+    color: var(--color-input-icon);
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index 6dcef2833..b8010e728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,6 +31,11 @@
   resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.44.tgz#db13902ad1667e455711b77d08cae1a0feafaa48"
   integrity sha512-2oQZPERYV+yNx/yoVWYjZZdOqsitJ5dfxXJjL18yczOXH6ujnsq+DTczSrX+RjzjQdVeJ1UAG053EJQF/FOiMg==
 
+"@algolia/autocomplete-theme-classic@1.0.0-alpha.44":
+  version "1.0.0-alpha.44"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.0.0-alpha.44.tgz#ce8169afb531ebbb5f277178371f5df6ea98c31e"
+  integrity sha512-xAqxcOTXJI8/cKxrNpFvPvvdybve7WfJZNBxpZ0Bo7mH3vwWmSKxvRbNd9C+xsbpDubJMsRSgNeSghmsmCo5xA==
+
 "@algolia/cache-browser-local-storage@4.8.5":
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.8.5.tgz#3eb10758c794d3cc8fc4e9f09e339d5b9589dc9c"

From 3b2e76c039af906e1414544c987bb21ef1318ee2 Mon Sep 17 00:00:00 2001
From: Sylvain Bellone <sylvain.bellone@algolia.com>
Date: Wed, 3 Mar 2021 11:20:04 +0100
Subject: [PATCH 4/5] cross button hover color

---
 frontend/src/index.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 0149d93da..0287d6859 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -86,6 +86,14 @@ $font-size: $font-size-m;
         color: var(--color-text);
       }
     }
+    .aa-InputWrapperSuffix {
+      .aa-ClearButton {
+        &:hover,
+        &:focus {
+          color: var(--color-text);
+        }
+      }
+    }
   }
 }
 

From 82a54bfb088414b62be3d92377520315eac648ed Mon Sep 17 00:00:00 2001
From: Sylvain Bellone <sylvain.bellone@algolia.com>
Date: Wed, 3 Mar 2021 11:20:49 +0100
Subject: [PATCH 5/5] Changed detached config API

---
 frontend/src/AutocompleteWrapper.ts | 10 +++++++++-
 frontend/src/types/options.ts       |  2 +-
 public/index.html                   |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/AutocompleteWrapper.ts b/frontend/src/AutocompleteWrapper.ts
index 86a85fac5..c4465a1b5 100644
--- a/frontend/src/AutocompleteWrapper.ts
+++ b/frontend/src/AutocompleteWrapper.ts
@@ -42,6 +42,14 @@ class AutocompleteWrapper {
       return;
     }
 
+    let detachedMediaQuery = undefined;
+    if (this.options.detached) {
+      if (this.options.detached === true) {
+        detachedMediaQuery = '';
+      } else {
+        detachedMediaQuery = this.options.detached.mediaQuery;
+      }
+    }
     const instance = autocomplete<AlgoliaRecord>({
       container: $input,
       autoFocus: false,
@@ -49,7 +57,7 @@ class AutocompleteWrapper {
       debug: this.options.debug,
       openOnFocus: this.options.openOnFocus,
       panelPlacement: 'input-wrapper-width',
-      detachedMediaQuery: this.options.detachedMediaQuery,
+      detachedMediaQuery,
       getSources: () => {
         return [this.getSources()];
       },
diff --git a/frontend/src/types/options.ts b/frontend/src/types/options.ts
index c6c7c27f1..a2452a890 100644
--- a/frontend/src/types/options.ts
+++ b/frontend/src/types/options.ts
@@ -17,7 +17,7 @@ export interface Options {
     colorSourceIcon?: string;
   };
   debug?: boolean;
-  detachedMediaQuery?: string;
+  detached?: true | { mediaQuery: string };
   placeholder?: string;
   openOnFocus?: boolean;
   poweredBy?: boolean;
diff --git a/public/index.html b/public/index.html
index cbc607d7e..56aced30e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -178,7 +178,7 @@ <h2>Test content</h2>
             text: '#d6d6e7',
             colorSourceIcon: '#d6d6e7'
           },
-          detachedMediaQuery: '',
+          detached: { mediaQuery: '(max-width: 900px)' },
         });`
       .split('\n')
       .map((l) => l.replace(/^\s{8}/, ''))