Add button to show tags on smaller screens (#529)

* Implement tag modal

* Improve header controls responsiveness

* Improve modal styles

* Cleanup

bookmarks/styles/base.scss

@@ -50,14 +50,20 @@ section.content-area {
     border-bottom: solid 1px $border-color;
     display: flex;
     flex-wrap: wrap;
+    column-gap: $unit-6;
     padding-bottom: $unit-2;
     margin-bottom: $unit-4;
 
     h2 {
+      flex: 0 0 auto;
       line-height: 1.8rem;
-      margin-right: auto;
       margin-bottom: 0;
     }
+
+    .header-controls {
+      flex: 1 1 0;
+      display: flex;
+    }
   }
 }
 

bookmarks/styles/bookmark-page.scss

@@ -2,31 +2,36 @@
   grid-gap: $unit-10;
 }
 
-/* Bookmark search box */
-.bookmarks-page .search {
-  $searchbox-width: 180px;
-  $searchbox-width-md: 300px;
-  $searchbox-height: 1.8rem;
+/* Bookmark area header controls */
+.bookmarks-page .content-area-header {
+  --searchbox-max-width: 350px;
+  --searchbox-height: 1.8rem;
+
+  @media (max-width: $size-sm) {
+    --searchbox-max-width: initial;
+    flex-direction: column;
+  }
+}
+
+.bookmarks-page #search {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: flex-end;
 
   // Regular input
   input[type='search'] {
-    width: $searchbox-width;
-    height: $searchbox-height;
+    height: var(--searchbox-height);
     -webkit-appearance: none;
-
-    @media (min-width: $control-width-md) {
-      width: $searchbox-width-md;
-    }
   }
 
   // Enhanced auto-complete input
   // This needs a bit more wrangling to make the CSS component align with the attached button
   .form-autocomplete {
-    height: $searchbox-height;
+    height: var(--searchbox-height);
 
     .form-autocomplete-input {
-      width: $searchbox-width;
-      height: $searchbox-height;
+      width: 100%;
+      height: var(--searchbox-height);
 
       input[type='search'] {
         width: 100%;
@@ -34,13 +39,19 @@
         margin: 0;
         border: none;
       }
-
-      @media (min-width: $control-width-md) {
-        width: $searchbox-width-md;
-      }
     }
   }
 
+  .input-group {
+    flex: 1 1 0;
+    min-width: var(--searchbox-min-width);
+    max-width: var(--searchbox-max-width);
+  }
+
+  .input-group > :first-child {
+    flex: 1 1 0;
+  }
+
   // Group search options button with search button
   .input-group input[type='submit'] {
     border-top-right-radius: 0;

bookmarks/styles/spectre.scss

@@ -24,6 +24,7 @@
 @import "../../node_modules/spectre.css/src/dropdowns";
 @import "../../node_modules/spectre.css/src/empty";
 @import "../../node_modules/spectre.css/src/menus";
+@import "../../node_modules/spectre.css/src/modals";
 @import "../../node_modules/spectre.css/src/pagination";
 @import "../../node_modules/spectre.css/src/tabs";
 @import "../../node_modules/spectre.css/src/toasts";
@@ -100,6 +101,18 @@ ul.menu li:first-child {
   }
 }
 
+.modal {
+  // Add border to separate from background in dark mode
+  .modal-container {
+    border: solid 1px $border-color;
+  }
+
+  // Fix modal header to use default color
+  .modal-header {
+    color: inherit;
+  }
+}
+
 // Increase input font size on small viewports to prevent zooming on focus the input
 // on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
 // viewport size