[#181] resolve operations-dropdown behaviour: search-result are at the top if applicable, categories below. clearing search value will display categories

src/web/stylesheets/components/operations/_categories.css

@@ -1,3 +1,8 @@
+/**
+ * Operations - Categories list
+ */
+
+
 .category-title {
     display: flex;
     justify-content: space-between;
@@ -33,17 +38,6 @@
     border: none;
 }
 
-#categories {
-    position: absolute;
-    top: 40px; /* the height of the input[type="search"] with pos relative */
-    width: 100%;
-    height: auto;
-    max-height: 60vh;
-    overflow: scroll;
-    border-bottom: 1px solid var(--primary-border-colour);
-    z-index: 20; /* to dropdown on top of all the other elements */
-}
-
 #categories a {
     color: var(--category-list-font-colour);
     cursor: pointer;

src/web/stylesheets/components/operations/_operations.css

@@ -1,14 +1,34 @@
 /**
  * Operations component styles
+ *
+ * For consistency sake I'm using an ID, but the custom wrapper / dropdown component
+ * can ( should ) be made into a reusable, generic component
  */
 
-.operations-wrapper {
+#operations-wrapper {
     position: relative;
 }
 
+#operations-dropdown {
+    position: absolute;
+    top: 40px; /* the height of the input[type="search"] with pos relative */
+    width: 100%;
+    height: auto;
+    max-height: 60vh;
+    overflow: auto;
+    z-index: 20; /* to dropdown on top of all the other elements */
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
 #reset-operations.hidden,
 #search-results.hidden,
 #categories.hidden {
     z-index: -10;
     display: none;
 }
+
+@media only screen and ( min-width: 768px ){
+    #operations-dropdown {
+        border-bottom: none;
+    }
+}

src/web/stylesheets/components/operations/_search.css

@@ -1,5 +1,5 @@
 /**
- * Operations - Search component and search-results list
+ * Operations - Search component
  */
 
 #search {
@@ -9,14 +9,3 @@
         linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
         linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
-
-#search-results {
-    position: absolute;
-    top: 40px; /* the height of the input[type="search"] with pos relative */
-    width: 100%;
-    height: auto;
-    max-height: 60vh;
-    overflow: scroll;
-    border-bottom: 1px solid var(--primary-border-colour);
-    z-index: 20; /* to dropdown on top of all the other elements */
-}

src/web/stylesheets/layout/_structure.css

@@ -51,8 +51,7 @@ body {
         height: calc( 100vh - var(--banner-height));
     }
 
-    #categories,
-    #search-results {
+    #operations-dropdown {
         max-height: max-content;
         overflow: revert;
     }