From 641e62106ed37fa813ce6c538989ab62863ad2d4 Mon Sep 17 00:00:00 2001
From: Sylvain UTARD <sylvain.utard@gmail.com>
Date: Wed, 23 Dec 2015 15:01:28 +0100
Subject: [PATCH] chore(css): ensure the menu is wide enough, but no !important
 here

---
 src/styles/_variables.scss | 4 +++-
 src/styles/main.scss       | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 61e18582..94b6df3a 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -9,5 +9,7 @@ $color-left-column-bg: #F1F3F5;
 $color-left-column: #555;
 
 $breakpoint-medium: 568px;
-$breakpoint-large: 768px;;
+$breakpoint-large: 768px;
 
+$dropdown-min-width-medium: 400px;
+$dropdown-min-width-large: 600px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 880cfa95..c06169ae 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,8 +14,6 @@
   margin: 6px 0 0;
   padding: 4px;
   text-align: left;
-  left: -20px !important; // Hardcoded
-  right: -320px !important; // Hardcoded
 }
 
 // Each suggestion
@@ -111,6 +109,9 @@
 // BREAKPOINT 1:
 // Screen is big enough to display the text snippets
 @media (min-width: $breakpoint-medium) {
+  .aa-dropdown-menu {
+    min-width: $dropdown-min-width-medium;
+  }
   .algolia-docsearch-suggestion--text {
     display: block;
     font-size: .9em;
@@ -121,6 +122,9 @@
 // BREAKPOINT 2:
 // Screen is big enough to display results in two columns
 @media (min-width: $breakpoint-large) {
+  .aa-dropdown-menu {
+    min-width: $dropdown-min-width-large;
+  }
   .algolia-docsearch-suggestion {
     display: table;
     width: 100%;