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 ( -
// This is valid use of div, as no other semantic tag fits. + // This is valid use of div, as no other semantic tag fits. +
event.stopPropagation()}>

Filter

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;