From e5e29e892b3791175db51775ea2226a4f259734e Mon Sep 17 00:00:00 2001
From: Drew Edwards <github@drew.contact>
Date: Tue, 12 Dec 2023 18:51:42 +0000
Subject: [PATCH] fix: more responsive browse template (#24)

---
 caskethttp/browse/default_template.html | 27 ++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/caskethttp/browse/default_template.html b/caskethttp/browse/default_template.html
index 94df0712..6633f623 100644
--- a/caskethttp/browse/default_template.html
+++ b/caskethttp/browse/default_template.html
@@ -31,6 +31,10 @@
 	padding-right: 5%;
 }
 
+#summary {	
+	gap: 0.5em 1em;
+}
+
 .filler {
     flex: 1;
 }
@@ -85,10 +89,6 @@
 	padding-bottom: 10px;
 }
 
-.meta-item {
-	margin-right: 1em;
-}
-
 .dropdown {
     position: relative;
     font-weight: bold;
@@ -145,6 +145,7 @@
 #filter {
 	padding: 4px;
 	border: 1px solid #cccccc;
+	box-sizing: border-box;
 }
 
 table {
@@ -265,7 +266,19 @@
 	}
 
 	#filter {
-		max-width: 100px;
+		width: 100%;
+	}
+
+	.meta-item.filter-item {
+		flex: 1;
+	}
+
+	#summary {
+		flex-wrap: wrap;
+	}
+
+	#summary > .filler {
+		flex-basis: 100%;
 	}
 }
 </style>
@@ -328,7 +341,7 @@ <h1>
 					{{- if ne 0 .ItemsLimitedTo}}
 					<span class="meta-item">(of which only <b>{{.ItemsLimitedTo}}</b> are displayed)</span>
 					{{- end}}
-					<span class="meta-item"><input type="text" placeholder="filter" id="filter" onkeyup='filter()'></span>
+					<span class="meta-item filter-item"><input type="text" placeholder="filter" id="filter" onkeyup='filter()'></span>
                     <span class="filler"></span>
                     {{- if .ArchiveTypes }}
                     <div class="dropdown" onclick="">
@@ -479,4 +492,4 @@ <h1>
 			timeList.forEach(localizeDatetime);
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>