From 3e932cdae1f31bc4fbfd3359ed3cbdd4f506c84f Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Sat, 5 Aug 2023 21:04:06 +0000
Subject: [PATCH] Force sample searches on new line

---
 output/index.css                         | 19 +++++++++++--------
 sites/+components/communities-search.php |  4 +++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/output/index.css b/output/index.css
index 803ffae..7db26d4 100644
--- a/output/index.css
+++ b/output/index.css
@@ -185,18 +185,16 @@ header {
 
 #search-container {
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+	flex-direction: column;
 	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 --- */
diff --git a/sites/+components/communities-search.php b/sites/+components/communities-search.php
index c8b20ee..3be0d1f 100644
--- a/sites/+components/communities-search.php
+++ b/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): ?>