Fix jumping search box (#163)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.8.1 (01/10/2021)
+- [**enhancement**] Add global shortcut for search [#161](https://github.com/sissbruecker/linkding/pull/161)
+  - allows to press `s` to focus the search input
+
+---
+
 ## v1.8.0 (04/09/2021)
 - [**enhancement**] Wayback Machine Integration [#59](https://github.com/sissbruecker/linkding/issues/59)
   - Automatically creates snapshots of bookmarked websites on [web archive](https://archive.org/web/)

bookmarks/styles/bookmarks.scss

@@ -1,14 +1,16 @@
 .bookmarks-page .search {
+  $searchbox-width: 180px;
+  $searchbox-width-md: 300px;
   $searchbox-height: 1.8rem;
 
   // Regular input
   input[type='search'] {
-    width: 180px;
+    width: $searchbox-width;
     height: $searchbox-height;
     -webkit-appearance: none;
 
     @media (min-width: $control-width-md) {
-      width: 300px;
+      width: $searchbox-width-md;
     }
   }
 
@@ -18,14 +20,19 @@
     height: $searchbox-height;
 
     .form-autocomplete-input {
+      width: $searchbox-width;
       height: $searchbox-height;
-      width: 100%;
 
       input[type='search'] {
+        width: 100%;
         height: 100%;
         margin: 0;
         border: none;
       }
+
+      @media (min-width: $control-width-md) {
+        width: $searchbox-width-md;
+      }
     }
   }
 }