refactor(search): ♻️ simplify search box structure

resources/skins.citizen.search/skins.citizen.search.less

@@ -3,6 +3,7 @@
 
 .citizen-typeahead {
 	position: absolute;
+	top: 100%;
 	overflow: auto;
 	width: 100%;
 	max-height: ~'calc( var( --header-card-maxheight ) - var( --height-search-bar ) )';

resources/skins.citizen.styles/components/Search.less

@@ -9,12 +9,10 @@
 		top: 0;
 		right: 0;
 		left: 0;
-		display: flex;
 		width: var( --width-search-bar );
 		max-width: ~'calc(100vw - var( --padding-page ) )';
 		height: var( --height-search-bar );
 		margin: var( --space-md ) auto;
-		gap: 0.25rem;
 		.citizen-card();
 		.citizen-card-hide( top center, '', false );
 		.citizen-card-transition();
@@ -27,30 +25,9 @@
 				background-size: 1rem;
 			}
 		}
-
-		/**
-		 * Loading indicator for searchbox
-		 * See common/progressbar.less
-		 **/
-		&.citizen-loading::after {
-			position: absolute;
-			top: 100%;
-		}
-	}
-
-	&__icon,
-	&__random {
-		// So that searchInput has the full width,
-		// and search suggestions will match that width
-		position: absolute;
-	}
-
-	&__icon {
-		left: 0;
 	}
 
 	&__random {
-		right: 0;
 		border-radius: var( --border-radius--small );
 
 		.citizen-ui-icon::before {
@@ -77,13 +54,21 @@
 	}
 
 	&__form {
-		flex-grow: 1;
+		display: flex;
+
+		/**
+		 * Loading indicator for searchbox
+		 * See common/progressbar.less
+		 **/
+		&.citizen-loading::after {
+			position: absolute;
+			top: 100%;
+		}
 	}
 
 	#searchInput {
-		width: 100%;
-		height: 100%;
-		padding: 0 var( --height-search-bar );
+		flex-grow: 1;
+		padding: 0;
 		border: 0; // Cancel default border
 		appearance: none;
 		background: transparent; // Cancel default background

templates/Search.mustache

@@ -16,18 +16,20 @@
 		aria-haspopup="true">
 	{{>Search__button}}
 	<div role="search" class="citizen-search-box citizen-search__card citizen-menu-checkbox-target">
-		<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
 		<form action="{{form-action}}" class="citizen-search__form" id="searchform" autocomplete="off">
 			<input type="hidden" name="title" value="{{page-title}}">
-			<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
+			<label for="searchInput">
+				<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
+				<span class="screen-reader-text">{{msg-search}}</span>
+			</label>
 			{{{html-input}}}
+			<a
+				class="citizen-search__random"
+				href="{{html-random-href}}"
+				title="{{msg-randompage}}">
+				<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>
+				<span class="screen-reader-text">{{msg-random}}</span>
+			</a>
 		</form>
-		<a
-			class="citizen-search__random"
-			href="{{html-random-href}}"
-			title="{{msg-randompage}}">
-			<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>
-			<span class="screen-reader-text">{{msg-random}}</span>
-		</a>
 	</div>
 </div>