move theme button and search bar

website/src/lib/components/AlgoliaDocSearch.svelte

@@ -64,3 +64,9 @@
 </svelte:head>
 
 <div id="docsearch" class={props.class ?? ''}></div>
+
+<style>
+    #docsearch :global(button) {
+        margin-left: 0px;
+    }
+</style>

website/src/lib/components/Footer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
     import LanguageSelect from '$lib/components/LanguageSelect.svelte';
+    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
     import Logo from '$lib/components/Logo.svelte';
     import { AtSign, BookOpenText, Heart, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
@@ -20,7 +21,10 @@
                 >
                     MIT © 2026 gpx.studio
                 </Button>
-                <LanguageSelect class="w-40 mt-3" />
+                <div class="mt-3 flex flex-row gap-1.5">
+                    <LanguageSelect />
+                    <ModeSwitch />
+                </div>
             </div>
             <div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
                 <div class="flex flex-col items-start gap-1">

website/src/lib/components/LanguageSelect.svelte

@@ -5,16 +5,10 @@
     import { getURLForLanguage } from '$lib/utils';
     import { Languages } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-
-    let {
-        class: className = '',
-    }: {
-        class?: string;
-    } = $props();
 </script>
 
 <Select.Root type="single" value={i18n.lang}>
-    <Select.Trigger class="min-w-[180px] {className}" aria-label={i18n._('menu.language')}>
+    <Select.Trigger class="w-[180px] px-2" aria-label={i18n._('menu.language')}>
         <Languages size="16" />
         <span class="mr-auto">
             {languages[i18n.lang]}

website/src/lib/components/ModeSwitch.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <Button
-    variant="ghost"
+    variant="outline"
     size="icon"
     class={className}
     onclick={() => {

website/src/lib/components/Nav.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
     import Logo from '$lib/components/Logo.svelte';
     import { Button } from '$lib/components/ui/button';
-    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
-    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
     import { BookOpenText, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
@@ -10,13 +8,16 @@
 
 <nav class="w-full sticky top-0 bg-background z-50">
     <div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
-        <a href={getURLForLanguage(i18n.lang, '/')} class="shrink-0 translate-y-0.5">
+        <a
-            <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
+            href={getURLForLanguage(i18n.lang, '/')}
-            <Logo class="h-8 hidden sm:block" width="153" />
+            class="shrink-0 translate-y-0.5 justify-self-start"
+        >
+            <Logo class="h-8 xs:hidden" iconOnly={true} width="26" />
+            <Logo class="h-8 hidden xs:block" width="153" />
         </a>
         <Button
             variant="link"
-            class="text-base px-0 has-[>svg]:px-0"
+            class="text-base px-0 has-[>svg]:px-0 ml-auto"
             href={getURLForLanguage(i18n.lang, '/')}
         >
             <House size="18" />
@@ -39,7 +40,5 @@
             <BookOpenText size="18" />
             {i18n._('menu.help')}
         </Button>
-        <AlgoliaDocSearch class="ml-auto" />
-        <ModeSwitch class="hidden xs:inline-flex" />
     </div>
 </nav>

website/src/routes/[[language]]/help/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
+    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { i18n } from '$lib/i18n.svelte';
     import { page } from '$app/state';
@@ -18,9 +19,10 @@
 </script>
 
 <div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
-    <div
+    <div class="hidden md:flex flex-col gap-2 w-40 sticky top-[108px] self-start shrink-0">
-        class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0"
+        <div class="mb-2">
-    >
+            <AlgoliaDocSearch />
+        </div>
         {#each Object.keys(guides) as guide}
             <Button
                 variant="link"