From ea5f0dbe26574ac503225eb1d57cafb084f90084 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 1 Nov 2020 18:44:50 +0100
Subject: [PATCH] Improve design of search

---
 editor/src/styles.scss | 14 +++++++++++++-
 templates/layout.html  | 17 ++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index 40f1a7b..f1620a7 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -250,7 +250,6 @@ mark {
 }
 #autocomplete {
   z-index: 1;
-  right: 0;
   width: 640px;
   overflow-x: hidden;
   overflow-y: auto;
@@ -441,3 +440,16 @@ input.input-line, input.input-line:active {
   overflow: hidden;
   display: block;
 }
+.searchbar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  .field > .control {
+    width: 100%;
+  }
+
+  .search.input {
+    width: 400px;
+  }
+}
diff --git a/templates/layout.html b/templates/layout.html
index 65ce114..db81ba3 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -40,17 +40,12 @@
         </div>
     </nav>
 
-    <div class="level">
-        <div class="level-left"></div>
-        <div class="level-right">
-            <div class="level-item">
-                <div class="field">
-                    <p class="control">
-                        <input class="search input" id="search-input" type="text" placeholder="Find a page">
-                    </p>
-                    <div id="autocomplete" class="hide keyboard-list" tabindex="0"></div>
-                </div>
-            </div>
+    <div class="searchbar">
+        <div class="field">
+            <p class="control">
+                <input class="search input" id="search-input" type="text" placeholder="Find a page">
+            </p>
+            <div id="autocomplete" class="hide keyboard-list" tabindex="0"></div>
         </div>
     </div>