From 13db361cb9ecbb0de17f0b23aa729f1e0f969294 Mon Sep 17 00:00:00 2001
From: daylily <i@dayli.ly>
Date: Tue, 13 Jan 2026 18:04:58 -0400
Subject: [PATCH] Fix minor alignment jank

---
 webapp/src/App.svelte                                |  2 +-
 webapp/src/lib/layouts/connect/ConnectSection.svelte |  7 ++++---
 webapp/src/lib/layouts/write/WriteSection.svelte     | 11 ++++++-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/webapp/src/App.svelte b/webapp/src/App.svelte
index 26522d7..62e37da 100644
--- a/webapp/src/App.svelte
+++ b/webapp/src/App.svelte
@@ -9,7 +9,7 @@ import Main from '$lib/layouts/Main.svelte'
 <ModeWatcher />
 <Toaster position="bottom-center" duration={2000} theme={mode.current} invert />
 
-<div class="max-w-7xl min-h-dvh m-auto p-6 stack gap-4">
+<div class="max-w-7xl min-h-dvh m-auto p-6 lg:py-8 stack gap-4">
   <Main />
   <Footer />
 </div>
diff --git a/webapp/src/lib/layouts/connect/ConnectSection.svelte b/webapp/src/lib/layouts/connect/ConnectSection.svelte
index 035083c..57e30e5 100644
--- a/webapp/src/lib/layouts/connect/ConnectSection.svelte
+++ b/webapp/src/lib/layouts/connect/ConnectSection.svelte
@@ -41,11 +41,12 @@ $effect(() => {
   <div class="grow">
     <h2 class="font-semibold text-xl/8" id="connect-section-label">Connect to a device</h2>
 
-    <div class="row gap-1 text-sm" aria-live="polite">
+    <div class="stack-h gap-1 text-sm" aria-live="polite">
       {#if deviceCtx.device === null}
-        <IconPending aria-hidden /> Not connected to any device yet. Plug in your device to connect.
+        <IconPending class="mt-0.5 shrink-0" aria-hidden /> Not connected to any device yet. Plug in your
+        device to connect.
       {:else}
-        <MoreInfo>
+        <MoreInfo class="mt-0.5 shrink-0">
           {#snippet icon()}
             <IconCheckCircle aria-hidden />
           {/snippet}
diff --git a/webapp/src/lib/layouts/write/WriteSection.svelte b/webapp/src/lib/layouts/write/WriteSection.svelte
index 025935c..50a154f 100644
--- a/webapp/src/lib/layouts/write/WriteSection.svelte
+++ b/webapp/src/lib/layouts/write/WriteSection.svelte
@@ -15,14 +15,15 @@ let inProgress = $state(false)
   <div class="grow">
     <h2 class="font-semibold text-xl/8" id="write-section-label">Write pattern to device</h2>
 
-    <div class="row gap-1 text-sm" aria-live="polite">
+    <div class="text-sm stack-h gap-1" aria-live="polite">
       {#if imageCtx.image === null}
-        <IconPending aria-hidden /> Select an image file in order to write it onto your device.
+        <IconPending class="mt-0.5 shrink-0" aria-hidden /> Select an image file in order to write it
+        onto your device.
       {:else if !inProgress}
-        <IconArrowUploadProgress aria-hidden /> Write the pattern onto your device if you have finished
-        editing the image.
+        <IconArrowUploadProgress class="mt-0.5 shrink-0" aria-hidden /> Write the pattern onto your device
+        if you have finished editing the image.
       {:else}
-        <IconWarning aria-hidden /> Refresh in progress. Do not disconnect device.
+        <IconWarning class="mt-0.5 shrink-0" aria-hidden /> Refresh in progress. Do not disconnect device.
       {/if}
     </div>
   </div>