feat(web): responsive design

- fix mobile accessibility

web/src/App.svelte

@@ -15,7 +15,7 @@
     } from "./solver/types.ts";
     import SolverOutput from "./components/SolverOutput.svelte";
     import { FolderGit2 } from "@lucide/svelte";
-    import { tick } from "svelte";
+    import { tick, onMount } from "svelte";
 
     let guesses = $state([
         {
@@ -45,6 +45,19 @@
     let w_lines: WordleLine[] = $state([]);
     let cursor = $state(0);
 
+    let is_desktop = $state(false);
+
+    onMount(() => {
+        const update = () => {
+            is_desktop = window.innerWidth >= 768;
+        };
+
+        update();
+        window.addEventListener("resize", update);
+
+        return () => window.removeEventListener("resize", update);
+    });
+
     async function toggleSolver() {
         if (solving) {
             await stopSolver();
@@ -136,14 +149,16 @@
 <svelte:window onkeydown={handleKey} />
 
 <div
-    class="min-h-screen w-full max-w-full
+    class="h-dvh w-full max-w-full
            bg-zinc-950 text-zinc-100
-           flex flex-wrap
-           items-center justify-center p-10 gap-2
-           overflow-x-hidden
-  select-none
            "
 >
+    <div
+        class="h-full overflow-y-auto
+               flex flex-wrap md:flex-row
+               items-center justify-center p-2 md:p-10 gap-4
+               overflow-hidden select-none"
+    >
         <a
             class="fixed top-4 right-4"
             href="https://git.jroeger.de/jonas/wordle-solver-rs"
@@ -180,11 +195,13 @@
                 {/await}
             </p>
 
-        <div class="ml-16 mt-2 flex flex-col gap-2">
+            <div class="mt-2 flex flex-col gap-2">
                 {#each guesses as g, i (g)}
                     <WordleLine
                         active={i === guesses.length - 1}
-                    on_guess_pressed={i === guesses.length - 1 ? doGuess : null}
+                        on_guess_pressed={i === guesses.length - 1
+                            ? doGuess
+                            : null}
                         bind:this={w_lines[i]}
                         bind:cursor
                         bind:letters={guesses[i].letters}
@@ -194,14 +211,16 @@
                 {/each}
             </div>
 
+            {#if is_desktop}
                 <p class="mt-4 text-sm text-zinc-500 mx-auto w-3/4">
-            Type letters · ← → navigate · Space cycle color · Backspace delete ·
+                    Type letters · ← → navigate · Space cycle color · Backspace
-            Enter apply · Shift+Enter solve · Escape abort solver · Ctrl+Esc
+                    delete · Enter apply · Shift+Enter solve · Escape abort
-            reset
+                    solver · Ctrl+Esc reset
                 </p>
+            {/if}
             <button
                 tabindex="-1"
-            class="mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+                class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
                 onclick={(e) => {
                     e.currentTarget.blur();
                     toggleSolver();
@@ -224,4 +243,17 @@
                 bind:solving
             />
         {/if}
+    </div>
 </div>
+
+<style>
+    :global(body) {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        overscroll-behavior: none;
+        background: #09090b;
+    }
+</style>

web/src/components/WordleLine.svelte

@@ -38,6 +38,7 @@
         if (event.key === "Backspace") {
             if (letters[cursor] === "" && cursor > 0) {
                 cursor--;
+                inputs[cursor].focus();
             }
 
             if (active) {
@@ -69,7 +70,7 @@
             disabled={!active}
             tabindex="-1"
             class="
-                flex h-16 w-16 items-center justify-center
+                flex aspect-square max-w-16 w-1/6 items-center justify-center
                 rounded-lg border-2
                 text-3xl font-bold
                 transition-all text-center caret-transparent
@@ -111,7 +112,7 @@
         />
     {/each}
     <span
-        class="w-16 text-sm text-zinc-500 self-center flex items-center justify-center"
+        class="max-w-14 w-1/6 text-sm text-zinc-500 self-center flex items-center justify-center"
         onclick={info_gained === null ? on_guess_pressed : null}
     >
         {#if info_gained === null}