improve responsive layout of search results

public/css/Cis4/Cis.css

@@ -473,4 +473,45 @@ html {
 	transition-property: background,color;
 	transition-duration: 0.3s,0.2s;
 	transition-timing-function: ease-out,ease-out;
+}
+@media screen and ( max-width: 767px ) {
+	#nav-search  {
+		position: static;
+	}
+
+	#nav-search .searchbar_results {
+		top: 100%;
+		width: 98vw !important;
+		left: 1vw !important;
+		right: 1vw !important;
+	}
+}
+
+@media screen and ( max-width: 576px ) {
+	.searchbar_icon img {
+		max-width: 65px !important;
+	}
+
+	.searchbar_icon i {
+		font-size: 3em !important;
+	}
+
+	.searchbar_grid {
+		grid-template-columns: [icon] 75px [data] auto;
+	}
+
+	.searchbar_table,
+	.searchbar_tablerow,
+	.searchbar_tablecell {
+		display: block;
+	}
+
+	.searchbar_tablecell.searchbar_label {
+		font-weight: bold;
+	}
+
+	.searchbar_tablecell.searchbar_value {
+		padding-left: 2.5rem;
+		overflow-wrap: break-word;
+	}
 }

public/css/components/searchbar/searchbar.css

@@ -21,14 +21,17 @@
     z-index: 9998; 
     background-color: #fff; 
     border: 1px solid lightgrey;
-    padding: 1rem;
-    overflow-y: auto;
+    padding: .5rem;
     top: 100%;
     width: 100%;
     left: 0;
     right: 0;
 }
 
+.searchbar_results_scroller {
+    overflow-y: auto;
+}
+
 .searchbar_result {
     border-bottom: 1px solid lightgrey;
     margin-bottom: 1rem;
@@ -104,4 +107,4 @@
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE/Edge */
-  }
+  }