Fix a number of light mode issues and get rid of scrollbar jumping on menus (#4760)

* Fix DEV-466, Fixes #4692 as well as a bunch of other poor contrast and inconsistency issues in light mode. Adds shadows to buttons and makes scrollbar gutter stable.

* lintttt & only do scrollbar gutter on website

* try to fix following hydration issue

* try another clientonly approach

* fix home page link animation

* lint

* remove dropdown style from checkbox & improve shadow consistency

* liiiint

apps/frontend/src/components/ui/search/SearchFilter.vue

@@ -1,77 +0,0 @@
-<template>
-	<Checkbox
-		class="filter"
-		:model-value="activeFilters.includes(facetName)"
-		:description="displayName"
-		@update:model-value="toggle()"
-	>
-		<div class="filter-text">
-			<div v-if="icon" aria-hidden="true" class="icon" v-html="icon" />
-			<div v-else class="icon">
-				<slot />
-			</div>
-			<span aria-hidden="true"> {{ displayName }}</span>
-		</div>
-	</Checkbox>
-</template>
-
-<script>
-import Checkbox from '~/components/ui/Checkbox.vue'
-
-export default {
-	components: {
-		Checkbox,
-	},
-	props: {
-		facetName: {
-			type: String,
-			default: '',
-		},
-		displayName: {
-			type: String,
-			default: '',
-		},
-		icon: {
-			type: String,
-			default: '',
-		},
-		activeFilters: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
-	},
-	emits: ['toggle'],
-	methods: {
-		toggle() {
-			this.$emit('toggle', this.facetName)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.filter {
-	margin-bottom: 0.5rem;
-
-	:deep(.filter-text) {
-		display: flex;
-		align-items: center;
-
-		.icon {
-			height: 1rem;
-
-			svg {
-				margin-right: 0.25rem;
-				width: 1rem;
-				height: 1rem;
-			}
-		}
-	}
-
-	span {
-		user-select: none;
-	}
-}
-</style>