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

packages/ui/src/components/modal/NewModal.vue

@@ -151,21 +151,10 @@ const visible = ref(false)
 const scrollContainer = ref<HTMLElement | null>(null)
 const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(scrollContainer)
 
-// make modal opening not shift page when there's a vertical scrollbar
-function addBodyPadding() {
-	const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
-	if (scrollBarWidth > 0) {
-		document.body.style.paddingRight = `${scrollBarWidth}px`
-	} else {
-		document.body.style.paddingRight = ''
-	}
-}
-
 function show(event?: MouseEvent) {
 	props.onShow?.()
 	open.value = true
 
-	addBodyPadding()
 	document.body.style.overflow = 'hidden'
 	window.addEventListener('mousedown', updateMousePosition)
 	window.addEventListener('keydown', handleKeyDown)
@@ -184,7 +173,6 @@ function hide() {
 	props.onHide?.()
 	visible.value = false
 	document.body.style.overflow = ''
-	document.body.style.paddingRight = ''
 	window.removeEventListener('mousedown', updateMousePosition)
 	window.removeEventListener('keydown', handleKeyDown)
 	setTimeout(() => {