Make write section sticky

webapp/src/App.svelte

@@ -12,7 +12,7 @@ import { Toaster } from 'svelte-sonner'
 <ModeWatcher />
 <Toaster position="bottom-center" duration={2000} theme={mode.current} invert />
 
-<div class="m-auto stack min-h-dvh max-w-7xl gap-4 p-6 lg:py-8">
+<div class="m-auto stack min-h-dvh max-w-[calc(var(--container-7xl)-2*6*var(--spacing))]">
   <Main />
   <Footer />
 </div>

webapp/src/app.css

@@ -119,6 +119,7 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }

webapp/src/lib/layouts/Footer.svelte

@@ -5,7 +5,7 @@ import IconDarkMode from '~icons/material-symbols/dark-mode'
 import IconLightMode from '~icons/material-symbols/light-mode'
 </script>
 
-<footer class="row text-sm text-muted-foreground">
+<footer class="mx-6 mb-6 row text-sm text-muted-foreground xl:mx-0">
   <div class="grow">
     {new Date().getFullYear()} &copy;
     <a class="no-underline hover:underline" href="https://dayli.ly">daylily</a>

webapp/src/lib/layouts/Main.svelte

@@ -30,13 +30,7 @@ onMount(async () => {
   <h1 class="sr-only">Write to Inkclip</h1>
 
   <ConnectSection />
-
-  <Separator decorative />
-
   <EditSection />
-
-  <Separator decorative />
-
   <WriteSection />
 
   <PermissionRequestDialog open={midiCtx.perm === 'prompt'} />

webapp/src/lib/layouts/connect/ConnectSection.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import MoreInfo from '$lib/components/MoreInfo.svelte'
+import { Separator } from '$lib/components/ui/separator'
 import { getDeviceContext } from '$lib/contexts/device.svelte'
 import { assert } from '$lib/utils'
 import IconCheckCircle from '~icons/material-symbols/check-circle'
@@ -33,28 +34,29 @@ $effect(() => {
 })
 </script>
 
-<section
+<section aria-labelledby="connect-section-label">
-  class="flex flex-col gap-2 lg:flex-row lg:items-center"
+  <div class="mx-6 mt-6 mb-4 stack gap-2 lg:row xl:mx-0">
-  aria-labelledby="connect-section-label"
+    <div class="grow">
->
+      <h2 class="text-xl/8 font-semibold" id="connect-section-label">Connect to a device</h2>
-  <div class="grow">
-    <h2 class="text-xl/8 font-semibold" id="connect-section-label">Connect to a device</h2>
 
-    <div class="stack-h gap-1 text-sm" aria-live="polite">
+      <div class="stack-h gap-1 text-sm" aria-live="polite">
-      {#if deviceCtx.device === null}
+        {#if deviceCtx.device === null}
-        <IconPending class="mt-0.5 shrink-0" aria-hidden /> Not connected to any device yet. Plug in your
+          <IconPending class="mt-0.5 shrink-0" aria-hidden /> Not connected to any device yet. Plug in
-        device to connect.
+          your device to connect.
-      {:else}
+        {:else}
-        <MoreInfo class="mt-0.5 shrink-0">
+          <MoreInfo class="shrink-0">
-          {#snippet icon()}
+            {#snippet icon()}
-            <IconCheckCircle aria-hidden />
+              <IconCheckCircle aria-hidden />
-          {/snippet}
+            {/snippet}
-          The serial ID of this device is <code>{serial}</code>.
+            The serial ID of this device is <code>{serial}</code>.
-        </MoreInfo>
+          </MoreInfo>
-        Successfully conected to device.
+          Successfully connected to device.
-      {/if}
+        {/if}
+      </div>
     </div>
+
+    <!-- <ConnectButton /> -->
   </div>
 
-  <!-- <ConnectButton /> -->
+  <Separator decorative />
 </section>

webapp/src/lib/layouts/edit/EditSection.svelte

@@ -8,7 +8,7 @@ const mediaLg = new MediaQuery('min-width: 1024px')
 const separatorOrientation = $derived(mediaLg.current ? 'vertical' : 'horizontal')
 </script>
 
-<div class="flex grow flex-col gap-4 lg:flex-row">
+<div class="mx-6 flex grow flex-col gap-4 lg:flex-row xl:mx-0">
   <PreviewSection />
 
   <Separator decorative orientation={separatorOrientation} />

webapp/src/lib/layouts/write/WriteSection.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Separator } from '$lib/components/ui/separator'
 import { getImageContext } from '$lib/contexts/image.svelte'
 import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
 import IconPending from '~icons/material-symbols/pending'
@@ -10,22 +11,36 @@ const imageCtx = getImageContext()
 let inProgress = $state(false)
 </script>
 
-<section class="flex flex-col gap-2 lg:flex-row" aria-labelledby="write-section-label">
+<section aria-labelledby="write-section-label">
-  <div class="grow">
+  <Separator decorative />
-    <h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>
 
-    <div class="stack-h gap-1 text-sm" aria-live="polite">
+  <div class="mx-6 mt-4 mb-6 stack gap-2 lg:row xl:mx-0">
-      {#if imageCtx.image === null}
+    <div class="grow">
-        <IconPending class="mt-0.5 shrink-0" aria-hidden /> Select an image file in order to write it
+      <h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>
-        onto your device.
+
-      {:else if !inProgress}
+      <div class="stack-h gap-1 text-sm" aria-live="polite">
-        <IconArrowUploadProgress class="mt-0.5 shrink-0" aria-hidden /> Write the pattern onto your device
+        {#if imageCtx.image === null}
-        if you have finished editing the image.
+          <IconPending class="mt-0.5 shrink-0" aria-hidden /> Select an image file in order to write it
-      {:else}
+          onto your device.
-        <IconWarning class="mt-0.5 shrink-0" aria-hidden /> Refresh in progress. Do not disconnect device.
+        {:else if !inProgress}
-      {/if}
+          <IconArrowUploadProgress class="mt-0.5 shrink-0" aria-hidden /> Write the pattern onto your
+          device if you have finished editing the image.
+        {:else}
+          <IconWarning class="mt-0.5 shrink-0" aria-hidden /> Refresh in progress. Do not disconnect device.
+        {/if}
+      </div>
     </div>
-  </div>
 
-  <WriteButton onprogress={v => (inProgress = v)} />
+    <WriteButton onprogress={v => (inProgress = v)} />
+  </div>
 </section>
+
+<style>
+/* @media (display-mode: standalone) { */
+section {
+  position: sticky;
+  bottom: 0;
+  background: var(--color-background);
+}
+/* } */
+</style>