adjust preview pane upwards on desktop

src/lib/components/content.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { navHeight } from '$lib/stores/layout';
   import { pane as navStore, type Pane } from '$lib/stores/nav';
 
   export let pane: Pane;
@@ -12,9 +13,20 @@
   // always show preview pane on a two column layout
   let preview: boolean;
   $: preview = pane === 'preview';
+
+  // offset preview pane upward on desktop
+  let offset: number;
+  $: offset = preview ? $navHeight : 0;
 </script>
 
-<div id={`pane-${pane}`} data-testid={testid} role="tabpanel" class:hidden class:preview>
+<div
+  id={`pane-${pane}`}
+  data-testid={testid}
+  role="tabpanel"
+  class:hidden
+  class:preview
+  style:--offset={`-${offset}px`}
+>
   <slot />
 </div>
 
@@ -34,6 +46,9 @@
       &.preview {
         border-right: unset !important;
         display: unset !important;
+        height: calc(100% - var(--offset));
+        position: relative;
+        top: var(--offset);
       }
     }
   }

src/lib/components/nav-tree.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { navHeight } from '$lib/stores/layout';
+
   import NavToggle from './nav-toggle.svelte';
 
   let open: boolean = false;
 
   let hidden: boolean;
   $: hidden = !open;
+
+  // magic to offset preview pane on desktop
+  let navRef: HTMLElement;
+
+  onMount(() => {
+    $navHeight = navRef.getBoundingClientRect().height;
+  });
 </script>
 
-<nav>
+<nav bind:this={navRef}>
   <NavToggle bind:navOpen={open} />
   <ul class:hidden role="tablist">
     <slot />

src/lib/stores/layout.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const navHeight = writable(-1);