From b67e4e0f824d73ad515f266967274b992ccff658 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 2 Jan 2026 22:17:30 +0100
Subject: [PATCH] fix: prevent input field overflow on mobile by ensuring equal
 margins

Adds box-sizing: border-box to all filter inputs after 'all: unset' to ensure padding is included within the 100% width calculation, preventing horizontal overflow and ensuring equal left/right margins on small screens.
---
 src/lib/components/CategoryFilter.svelte | 1 +
 src/lib/components/IconFilter.svelte     | 1 +
 src/lib/components/Search.svelte         | 1 +
 src/lib/components/SeasonFilter.svelte   | 1 +
 src/lib/components/TagFilter.svelte      | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/lib/components/CategoryFilter.svelte b/src/lib/components/CategoryFilter.svelte
index 4e29adb..9e4c2e8 100644
--- a/src/lib/components/CategoryFilter.svelte
+++ b/src/lib/components/CategoryFilter.svelte
@@ -102,6 +102,7 @@
 
 	input {
 		all: unset;
+		box-sizing: border-box;
 		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
diff --git a/src/lib/components/IconFilter.svelte b/src/lib/components/IconFilter.svelte
index ce86b23..dd6190f 100644
--- a/src/lib/components/IconFilter.svelte
+++ b/src/lib/components/IconFilter.svelte
@@ -93,6 +93,7 @@
 
 	input {
 		all: unset;
+		box-sizing: border-box;
 		font-family: "Noto Color Emoji", emoji, sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 2cdbb2e..d244fd0 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -265,6 +265,7 @@
 <style>
 input#search {
   all: unset;
+  box-sizing: border-box;
   font-family: sans-serif;
   background: var(--nord0);
   color: #fff;
diff --git a/src/lib/components/SeasonFilter.svelte b/src/lib/components/SeasonFilter.svelte
index a73d35d..2dde77c 100644
--- a/src/lib/components/SeasonFilter.svelte
+++ b/src/lib/components/SeasonFilter.svelte
@@ -114,6 +114,7 @@
 
 	input {
 		all: unset;
+		box-sizing: border-box;
 		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
diff --git a/src/lib/components/TagFilter.svelte b/src/lib/components/TagFilter.svelte
index ef08a26..5044a6e 100644
--- a/src/lib/components/TagFilter.svelte
+++ b/src/lib/components/TagFilter.svelte
@@ -111,6 +111,7 @@
 
 	input {
 		all: unset;
+		box-sizing: border-box;
 		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);