adjust sticky nav height for desktop

follow up to #347

Author: outofambit

src/components/Settings/index.astro

@@ -5,6 +5,7 @@ import {
   removeLocalePrefix,
   getUiTranslator,
 } from "@/src/i18n/utils";
+import { jumpToState } from "@/src/globals/state";
 import { AccessibilitySettings } from "@components/AccessibilitySettings/";
 import SearchForm from "@components/SearchForm/index.astro";
 import { LocaleSelect } from "@components/LocaleSelect";
@@ -72,7 +73,7 @@ const a11ySettingsProps = [
 const { hideSearch } = Astro.props;
 ---
 
-<div class={styles.container}>
+<div class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`}>
   <div id="settings-placeholder" class={styles.placeholder}></div>
   <div id="settings-hitbox" class={styles.hitbox}></div>
   <div id="settings-container" class={`${styles.wrapper} settings`}>

src/components/Settings/styles.module.scss

@@ -93,6 +93,16 @@
     position 0.3s;
 }
 
+.container:global(.noJumpTo) .wrapper:global(.open) {
+  top: 40px;
+  @media (min-width: $breakpoint-tablet) {
+    top: 0px;
+  }
+}
+
 .wrapper:global(.open) {
   top: 80px;
+  @media (min-width: $breakpoint-tablet) {
+    top: 0px;
+  }
 }