From ac38dfb92ad1fc2bc5a927da1f0228317b0a83b6 Mon Sep 17 00:00:00 2001
From: Christian van der Loo <chris.vanderloo@icloud.com>
Date: Mon, 3 Aug 2026 11:45:02 -0400
Subject: [PATCH] make responsive

---
 src/components/UploadForm.tsx | 64 +++++++++++++++++++----------------
 src/pages/index.astro         |  2 +-
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/UploadForm.tsx b/src/components/UploadForm.tsx
index 8a1ef14..acaa25f 100644
--- a/src/components/UploadForm.tsx
+++ b/src/components/UploadForm.tsx
@@ -49,38 +49,42 @@ export default function UploadForm() {
 
   return (
     <>
-      <div className="grid gap-x-4 gap-y-2 rounded-lg border border-zinc-200 bg-white p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
-        <label htmlFor="image" className="text-sm font-medium">
-          Image
-        </label>
-        <label htmlFor="alt" className="col-span-2 text-sm font-medium">
-          Alt text
-        </label>
-        <input
-          id="image"
-          className="min-h-10 w-full cursor-pointer rounded-md border border-zinc-300 bg-white px-3 py-2 file:mr-3 file:border-0 file:bg-transparent file:font-medium hover:bg-zinc-50 active:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
-          name="image"
-          type="file"
-          accept={IMAGE_ENCODINGS.join(",")}
-          disabled={isBusy}
-          onChange={(event) => {
-            setImage(event.target.files?.[0] ?? null);
-            setError("");
-          }}
-        />
-        <input
-          id="alt"
-          className="min-h-10 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
-          name="alt"
-          maxLength={2000}
-          placeholder="Describe the image"
-          disabled={isBusy}
-          value={alt}
-          onChange={(event) => setAlt(event.target.value)}
-        />
+      <div className="flex items-end gap-4 rounded-lg border border-zinc-200 bg-white p-4 max-sm:flex-col">
+        <div className="flex flex-col gap-1 flex-1 w-full">
+          <label htmlFor="image" className="text-sm font-medium">
+            Image
+          </label>
+          <input
+            id="image"
+            className="h-10 w-full cursor-pointer rounded-md border border-zinc-300 bg-white px-3 py-2 file:mr-3 file:border-0 file:bg-transparent file:font-medium hover:bg-zinc-50 active:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+            name="image"
+            type="file"
+            accept={IMAGE_ENCODINGS.join(",")}
+            disabled={isBusy}
+            onChange={(event) => {
+              setImage(event.target.files?.[0] ?? null);
+              setError("");
+            }}
+          />
+        </div>
+        <div className="flex flex-col gap-1 flex-1 w-full">
+          <label htmlFor="alt" className="col-span-2 text-sm font-medium">
+            Alt text
+          </label>
+          <input
+            id="alt"
+            className="h-10 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+            name="alt"
+            maxLength={2000}
+            placeholder="Describe the image"
+            disabled={isBusy}
+            value={alt}
+            onChange={(event) => setAlt(event.target.value)}
+          />
+        </div>
         <button
           type="button"
-          className="inline-flex min-w-24 cursor-pointer items-center justify-center gap-2 rounded-md border border-zinc-700 bg-zinc-700 px-4 py-2 text-sm font-medium text-white hover:bg-hover-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hover-700 disabled:cursor-not-allowed disabled:opacity-60"
+          className="inline-flex min-w-24 h-10 cursor-pointer items-center justify-center gap-2 rounded-md border border-zinc-700 bg-zinc-700 px-4 py-2 text-sm font-medium text-white hover:bg-hover-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hover-700 disabled:cursor-not-allowed disabled:opacity-60"
           disabled={isBusy}
           onClick={upload}
         >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fe8d978..cd852db 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,7 @@ if (!isSignedIn) return Astro.redirect("/sign-in")
 
 <BaseLayout>
 	<main class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
-		<header class="flex items-center justify-between gap-4">
+		<header class="flex items-center justify-between gap-4 max-sm:flex-col">
 			<img src="/wordmark.png" class="max-w-48" />
 			<div class="flex gap-2">
   			<button
-- 
2.51.2