feat(ui): style search suggestions

public/css/styles.css

@@ -101,7 +101,7 @@ a {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    margin-top: 30vh;
 }
 
 #clock {
@@ -132,6 +132,23 @@ a {
     transition: all 0.2s ease-in-out;
 }
 
+#suggestions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 50vw;
+}
+
+#suggestions a {
+    padding: 10px 15px;
+    margin: 10px;
+    color: #fff;
+    text-decoration: none;
+    background-color: #333;
+    transition: all 0.2s ease-in-out;
+    border-radius: 0.25rem;
+}
+
 #search:focus {
     opacity: 1;
 }

views/settings.templ

@@ -23,12 +23,17 @@ templ Settings(user goth.User, settings *data.UserSettings) {
 			</div>
 			<div class="setting">
 				<label for="suggestions" class="tooltip-container">
-					Show Google-Powered Suggestions <icon class="bx bx-help-circle"></icon>
-					<p class="tooltip-text">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p>
+					Show Google-Powered Suggestions (experimental) <icon class="bx bx-help-circle"></icon>
+					<p class="tooltip-text">
+						This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.
+						<br/>
+						<br/>
+						Google has a tendency to localise suggestions. Becuase the requests are made from the mnemstart server, the suggestions may not be relevant to your local area.
+					</p>
 				</label>
 				<select name="suggestions" data-include-edit="">
-					<option value="true" selected?={ settings.ShowSuggestions }>Yes</option>
-					<option value="false" selected?={ !settings.ShowSuggestions }>No</option>
+					<option value="on" selected?={ settings.ShowSuggestions }>Yes</option>
+					<option value="off" selected?={ !settings.ShowSuggestions }>No</option>
 				</select>
 			</div>
 			<div class="action-buttons">