Fixed blue X rendering in Chrome/Edge browser #46

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;

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>

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;