From b2486446eb0701aaac11f94f89febe65e46a5a52 Mon Sep 17 00:00:00 2001
From: Martin Sunnset <martiasu@stud.ntnu.no>
Date: Wed, 16 Sep 2026 15:12:22 +0200
Subject: [PATCH 1/2] Fixed blue X not rendering in Chrome/Edge browser #46

---
 webdev-prosjekt1/src/components/Searchbar.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css
index 9c9c6de..e43b2be 100644
--- a/webdev-prosjekt1/src/components/Searchbar.css
+++ b/webdev-prosjekt1/src/components/Searchbar.css
@@ -39,6 +39,16 @@
 	color: var(--text_subtle);
 }
 
+.searchbar input[type='search']::-webkit-search-cancel-button,
+.searchbar input[type='search']::-webkit-search-decoration {
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.searchbar input[type='search']::-ms-clear {
+	display: none;
+}
+
 .search-clear-button {
 	display: grid;
 	place-items: center;

From 0f583b979f8b133b97a04cecf4a91ac25f089132 Mon Sep 17 00:00:00 2001
From: Martin Sunnset <martiasu@stud.ntnu.no>
Date: Wed, 16 Sep 2026 15:25:38 +0200
Subject: [PATCH 2/2] Made filter popup centered on the screen #46

---
 .../src/components/FilterPopup.css            | 21 +++++++++++++++++++
 .../src/components/FilterPopup.tsx            |  3 ++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/webdev-prosjekt1/src/components/FilterPopup.css b/webdev-prosjekt1/src/components/FilterPopup.css
index 3d77238..15a50e7 100644
--- a/webdev-prosjekt1/src/components/FilterPopup.css
+++ b/webdev-prosjekt1/src/components/FilterPopup.css
@@ -32,6 +32,27 @@
 	color: #f8f0df;
 }
 
+@media (max-width: 480px) {
+	.filter-overlay {
+		padding: 12px;
+	}
+
+	.filter-popup {
+		max-width: 100%;
+		max-height: calc(100dvh - 16px);
+		gap: 14px;
+		padding: 18px;
+	}
+
+	.filter-actions {
+		flex-wrap: wrap;
+	}
+
+	.filter-clear {
+		width: 100%;
+	}
+}
+
 @media (orientation: landscape) and (max-height: 600px) {
 	.filter-popup {
 		gap: 12px;
diff --git a/webdev-prosjekt1/src/components/FilterPopup.tsx b/webdev-prosjekt1/src/components/FilterPopup.tsx
index e5d1a5e..ad2b61b 100644
--- a/webdev-prosjekt1/src/components/FilterPopup.tsx
+++ b/webdev-prosjekt1/src/components/FilterPopup.tsx
@@ -28,7 +28,8 @@ export const FilterPopup = ({ filters, onChange, onClear, onClose }: FilterPopup
 	};
 
 	return (
-		<div className='filter-overlay' onClick={onClose}> // This is valid use of div, as no other semantic tag fits.
+		// This is valid use of div, as no other semantic tag fits.
+		<div className='filter-overlay' onClick={onClose}>
 			<section className='filter-popup' onClick={(event) => event.stopPropagation()}>
 				<header className='filter-popup-header'>
 					<h2>Filter</h2>