Force sample searches on new line

output/index.css

@@ -185,18 +185,16 @@ header {
 
 #search-container {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
-	flex-wrap: wrap;
 	max-height: 10rem;
 	justify-content: center;
 	box-sizing: border-box;
 	overflow: hidden;
 	transition: max-height 0.5s;
-	align-items: flex-start;
 }
 
 #search-container > * {
-	margin-block: 0.75rem;
+	margin-bottom: 1rem;
 }
 
 .collapsed {
@@ -204,13 +202,14 @@ header {
 }
 
 #search-container.collapsed > * {
-	/* display: none; */
+	display: none !important;
 }
 
 #search {
 	display: flex;
 	justify-content: center;
 	align-items: baseline;
+	margin-inline: 1rem;
 }
 
 #search-bar {
@@ -226,7 +225,11 @@ header {
 	color: red;
 }
 
-#btn-clear-search {
+#search-bar:placeholder-shown ~ .btn-clear-search {
+	visibility: hidden;
+}
+
+.btn-clear-search {
 	margin-right: 1rem;
 	font-size: 1.5rem;
 	padding: 0.25rem 1rem;
@@ -236,9 +239,9 @@ header {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	padding: 0 1rem;
+	margin-inline: 1rem;
 	justify-content: center;
-	row-gap: 0.2rem;
+	row-gap: 0.25rem;
 }
 
 /* --- Table --- */

sites/+components/communities-search.php

@@ -24,8 +24,10 @@
 
 <div id="search-container" class="collapsed">
 	<div id="search">
+<?php // Phantom element for alignnment ?>
+		<span class="btn-clear-search" style="visibility: hidden;" tabindex="-1">×</span>
 		<input id="search-bar" autocomplete="off" type="text" placeholder="Search for Communities">
-		<span id="btn-clear-search" class="anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
+		<span id="btn-clear-search" class="btn-clear-search anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
 	</div>
 	<div id="sample-searches">
 <?php foreach ($sample_searches as $search): ?>