From 52cbecab5197d672c40a0f3ee479f079ee56fc48 Mon Sep 17 00:00:00 2001
From: citrons <citrons@mondecitronne.com>
Date: Mon, 16 Jun 2025 21:25:13 -0500
Subject: improve thread filter selection appearance

it behaves more sensibly when there are a lot of tags
---
 apioforum/static/style.css          |  9 +++++++++
 apioforum/templates/view_forum.html | 30 ++++++++++++++++--------------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 8d0f2e3..e909a54 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -370,6 +370,15 @@ fieldset { margin-bottom: 15px; }
 .tag-editor input[type="checkbox"] { width: 12ch; }
 .new-tag { float: right; text-align: center; width: 12ch; margin-top: 10px }
 
+.tag-filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin-bottom: 10px;
+}
+
+.tag-filters input[type="radio"] { vertical-align: top; }
+
 .md table {
 	border: 1px solid var(--gray);
 	border-collapse: collapse;
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index b7309bf..fe82532 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -77,21 +77,23 @@ you do not have permission to create threads in this forum
 		{{ sortby_option("ca", "creation time (oldest first)") }}
 	</select>
 	<p>filter by tag:</p>
-	<input {% if tagfilter_tag is none %}checked{% endif %} type=radio id=tagfilter-none name=tagfilter value="">
-	<label for=tagfilter-none>don't</label>
-
-	{% for the_tag in avail_tags %}
-
-	<input type="radio" id="tagfilter-{{the_tag.id}}"
-		   name="tagfilter" value="{{the_tag.id}}"
-		   {% if tagfilter_tag.id == the_tag.id %}checked{% endif %}>
-	<label for="tagfilter-{{the_tag.id}}">
-		{{tag(the_tag)}}
-	</label>
-	{% endfor %}
-	<br>
-
+	<section class="tag-filters">
+		<div>
+			<input {% if tagfilter_tag is none %}checked{% endif %} type=radio id=tagfilter-none name=tagfilter value="">
+			<label for=tagfilter-none>don't</label>
+		</div>
 
+		{% for the_tag in avail_tags %}
+		<div>
+			<input type="radio" id="tagfilter-{{the_tag.id}}"
+				   name="tagfilter" value="{{the_tag.id}}"
+				   {% if tagfilter_tag.id == the_tag.id %}checked{% endif %}>
+			<label for="tagfilter-{{the_tag.id}}">
+				{{tag(the_tag)}}
+			</label>
+		</div>
+		{% endfor %}
+	</section>
 	<input type="submit" value="apply">
 	</fieldset>
 </form>
-- 
cgit v1.2.3