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/servers/ContentVersionEditModal.vue

@@ -245,13 +245,20 @@ import {
 	LockOpenIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, Combobox, CopyCode, NewModal } from '@modrinth/ui'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	Checkbox,
+	Combobox,
+	CopyCode,
+	NewModal,
+} from '@modrinth/ui'
 import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import Accordion from '~/components/ui/Accordion.vue'
-import Checkbox from '~/components/ui/Checkbox.vue'
 import ContentVersionFilter, {
 	type ListedGameVersion,
 	type ListedPlatform,

apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue

@@ -36,7 +36,7 @@
 						v-for="(option, index) in filteredOptions"
 						:key="isDivider(option) ? `divider-${index}` : option.id"
 					>
-						<div v-if="isDivider(option)" class="h-px w-full bg-button-bg"></div>
+						<div v-if="isDivider(option)" class="h-px w-full bg-surface-5"></div>
 						<ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
 							<button
 								v-if="typeof option.action === 'function'"
@@ -288,19 +288,10 @@ const handleMouseOver = (index: number) => {
 
 // Scrolling is disabled for keyboard navigation
 const disableBodyScroll = () => {
-	// Make opening not shift page when there's a vertical scrollbar
-	const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
-	if (scrollBarWidth > 0) {
-		document.body.style.paddingRight = `${scrollBarWidth}px`
-	} else {
-		document.body.style.paddingRight = ''
-	}
-
 	document.body.style.overflow = 'hidden'
 }
 
 const enableBodyScroll = () => {
-	document.body.style.paddingRight = ''
 	document.body.style.overflow = ''
 }