From 4082ca090e18b7262c4956090d8f13ad251e08ee Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 13:48:20 +0200
Subject: [PATCH 01/15] completely refactor the create secrets page for mobile
 screens

---
 components/CreateSecret/ExpireForm.tsx      | 75 +++++++++++----------
 components/CreateSecret/PassphraseInput.tsx | 47 +++++++------
 components/CreateSecret/ViewCount.tsx       | 51 +++++++-------
 components/Header.tsx                       |  4 +-
 deno.json                                   |  3 +-
 fresh.gen.ts                                |  4 ++
 islands/CreateSecret.tsx                    | 16 ++---
 islands/ui/Card.tsx                         | 19 ++++++
 routes/_app.tsx                             |  2 -
 routes/_layout.tsx                          | 11 +++
 routes/create.tsx                           |  1 +
 static/styles.css                           |  6 +-
 12 files changed, 143 insertions(+), 96 deletions(-)
 create mode 100644 islands/ui/Card.tsx
 create mode 100644 routes/_layout.tsx

diff --git a/components/CreateSecret/ExpireForm.tsx b/components/CreateSecret/ExpireForm.tsx
index 47f107c..33319c9 100644
--- a/components/CreateSecret/ExpireForm.tsx
+++ b/components/CreateSecret/ExpireForm.tsx
@@ -5,43 +5,48 @@ const isCustomExpireIn = signal(false);
 export default function ExpireForm() {
   return (
     <>
-      <label class="mt-4">
-        <input
-          type="checkbox"
-          name="customExpireIn"
-          checked={isCustomExpireIn.value}
-          onChange={() => {
-            isCustomExpireIn.value = !isCustomExpireIn.value;
-          }}
-        />
-        &nbsp;Eigene Ablaufzeit (default: 1 Tag)
+      <input
+        type="checkbox"
+        name="customExpireIn"
+        checked={isCustomExpireIn.value}
+        onChange={() => {
+          isCustomExpireIn.value = !isCustomExpireIn.value;
+        }}
+      />
+      <label class="mt-4" for="customExpireIn">
+        Eigene Ablaufzeit <br /> (default: 1 Tag)
       </label>
       {isCustomExpireIn.value && (
-        <form id="duration">
-          <input
-            class="p-2 border-2 border-gray-500 rounded"
-            id="h"
-            name="h"
-            type="number"
-            min="0"
-            max="999"
-            value={0}
-            onWheel={scrollNumberInputValue}
-          />
-          <label for="h">h</label>
-          &nbsp;
-          <input
-            class="p-2 border-2 border-gray-500 rounded"
-            id="m"
-            name="m"
-            type="number"
-            min="0"
-            max="59"
-            value={0}
-            onWheel={scrollNumberInputValue}
-          />
-          <label for="m">m</label>
-        </form>
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <form id="duration">
+            <input
+              class="p-2 border-2 border-gray-500 rounded"
+              id="h"
+              name="h"
+              type="number"
+              min="0"
+              max="999"
+              value={0}
+              onWheel={scrollNumberInputValue}
+            />
+            <label for="h">h</label>
+            &nbsp;
+            <input
+              class="p-2 border-2 border-gray-500 rounded"
+              id="m"
+              name="m"
+              type="number"
+              min="0"
+              max="59"
+              value={0}
+              onWheel={scrollNumberInputValue}
+            />
+            <label for="m">m</label>
+          </form>
+        </>
       )}
     </>
   );
diff --git a/components/CreateSecret/PassphraseInput.tsx b/components/CreateSecret/PassphraseInput.tsx
index 4754d72..bea3bfe 100644
--- a/components/CreateSecret/PassphraseInput.tsx
+++ b/components/CreateSecret/PassphraseInput.tsx
@@ -5,30 +5,35 @@ const usePassphrase = signal(false);
 export default function PassphraseInput() {
   return (
     <>
-      <label>
-        <input
-          type="checkbox"
-          name="usePassphrase"
-          checked={usePassphrase.value}
-          onChange={() => {
-            usePassphrase.value = !usePassphrase.value;
-          }}
-        />
-        &nbsp;Eigene Passphrase verwenden um das Secret zu verschlüsseln
+      <input
+        type="checkbox"
+        name="usePassphrase"
+        checked={usePassphrase.value}
+        onChange={() => {
+          usePassphrase.value = !usePassphrase.value;
+        }}
+      />
+      <label for="usePassphrase">
+        Eigene Passphrase verwenden um das Secret zu verschlüsseln <br />
         (optional)
       </label>
       {usePassphrase.value && (
-        <label>
-          Passphrase:&nbsp;
-          <input
-            type="password"
-            name="passphrase"
-            class="p-2 border-2 border-gray-500 rounded"
-            placeholder="Optional"
-            required
-            autocomplete="off"
-          />
-        </label>
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Passphrase:&nbsp;
+            <input
+              type="password"
+              name="passphrase"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="Optional"
+              required
+              autocomplete="off"
+            />
+          </label>
+        </>
       )}
     </>
   );
diff --git a/components/CreateSecret/ViewCount.tsx b/components/CreateSecret/ViewCount.tsx
index 1a853f5..a90b4ec 100644
--- a/components/CreateSecret/ViewCount.tsx
+++ b/components/CreateSecret/ViewCount.tsx
@@ -6,31 +6,36 @@ const useViewCount = signal(false);
 export default function ViewCountInput() {
   return (
     <>
-      <label>
-        <input
-          type="checkbox"
-          name="useViewCount"
-          checked={useViewCount.value}
-          onChange={() => {
-            useViewCount.value = !useViewCount.value;
-          }}
-        />
-        &nbsp;Anzeigelimit ändern (default: 1)
+      <input
+        type="checkbox"
+        name="useViewCount"
+        checked={useViewCount.value}
+        onChange={() => {
+          useViewCount.value = !useViewCount.value;
+        }}
+      />
+      <label for="useViewCount">
+        Anzeigelimit ändern <br /> (default: 1)
       </label>
       {useViewCount.value && (
-        <label>
-          Anzeigelimit:&nbsp;
-          <input
-            type="number"
-            name="viewCount"
-            class="p-2 border-2 border-gray-500 rounded"
-            placeholder="1"
-            min={1}
-            value={1}
-            autocomplete="off"
-            onWheel={scrollNumberInputValue}
-          />
-        </label>
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Anzeigelimit:&nbsp;
+            <input
+              type="number"
+              name="viewCount"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="1"
+              min={1}
+              value={1}
+              autocomplete="off"
+              onWheel={scrollNumberInputValue}
+            />
+          </label>
+        </>
       )}
     </>
   );
diff --git a/components/Header.tsx b/components/Header.tsx
index 7a4e671..49cf98f 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -3,8 +3,8 @@ export default function Header() {
     <div class="px-2 py-4 mx-auto bg-primary ">
       <a href="/">
         <header class="md:max-w-screen mx-auto flex flex-col items-center justify-center">
-          <h1 class="text-4xl font-bold">SecretShare</h1>
-          <p class="text-3xl">
+          <h1 class="text-4xl font-bold mb-4">SecretShare</h1>
+          <p class="text-2xl text-balance text-center">
             Teile Passwörter und Tokens sicher über Einmal-View URL
           </p>
         </header>
diff --git a/deno.json b/deno.json
index 6125978..c4aadff 100644
--- a/deno.json
+++ b/deno.json
@@ -32,7 +32,8 @@
     "preact": "https://esm.sh/preact@10.22.0",
     "preact/": "https://esm.sh/preact@10.22.0/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1"
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "tailwind-merge": "npm:tailwind-merge@^3.3.1"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
diff --git a/fresh.gen.ts b/fresh.gen.ts
index e628f9e..146be9f 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -4,6 +4,7 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
 import * as $api_create from "./routes/api/create.ts";
 import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts";
 import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts";
@@ -15,12 +16,14 @@ import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
 import * as $messages_CardMsg from "./islands/messages/CardMsg.tsx";
 import * as $messages_ErrorCardMsg from "./islands/messages/ErrorCardMsg.tsx";
+import * as $ui_Card from "./islands/ui/Card.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/api/create.ts": $api_create,
     "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
     "./routes/api/secret/[uuid].ts": $api_secret_uuid_,
@@ -34,6 +37,7 @@ const manifest = {
     "./islands/Log.tsx": $Log,
     "./islands/messages/CardMsg.tsx": $messages_CardMsg,
     "./islands/messages/ErrorCardMsg.tsx": $messages_ErrorCardMsg,
+    "./islands/ui/Card.tsx": $ui_Card,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 937d46d..3a57b9f 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -6,7 +6,7 @@ import ViewCount from "@/components/CreateSecret/ViewCount.tsx";
 export default function CreateSecret() {
   return (
     <section>
-      <h2 class="my-8 text-2xl font-bold items-center flex flex-col">
+      <h2 class="my-4 text-2xl font-bold items-center flex flex-col">
         Erstelle ein neues Secret
       </h2>
       <form
@@ -23,18 +23,18 @@ export default function CreateSecret() {
           style="display:none;"
         />
         <textarea
-          rows={10}
-          cols={60}
           name="secret"
-          class="w-full p-2 border-2 border-gray-500 rounded"
+          class="w-[90%] min-h-40 p-2 border-2 border-gray-500 rounded"
           placeholder="Passwort, Token oder andere Information..."
         />
 
-        <ExpireForm />
-        <PassphraseInput />
-        <ViewCount />
+        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%]">
+          <ExpireForm />
+          <PassphraseInput />
+          <ViewCount />
+        </div>
 
-        <button class="p-2" type="submit">Anlegen</button>
+        <button class="p-2 self-stretch" type="submit">Anlegen</button>
       </form>
     </section>
   );
diff --git a/islands/ui/Card.tsx b/islands/ui/Card.tsx
new file mode 100644
index 0000000..72586bf
--- /dev/null
+++ b/islands/ui/Card.tsx
@@ -0,0 +1,19 @@
+import { JSX } from "preact/jsx-runtime";
+import { twJoin } from "tailwind-merge";
+
+export default function Card(
+  props: {
+    class?: string;
+    children: JSX.Element | undefined;
+  },
+) {
+  const classes = twJoin(
+    "shadow-lg rounded-lg  max-w-2xl border-[1px] border-gray-200",
+    props.class,
+  );
+  return (
+    <div class={classes}>
+      {props.children}
+    </div>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 6e03839..fd4a5fc 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -1,5 +1,4 @@
 import { type PageProps } from "$fresh/server.ts";
-import Header from "@/components/Header.tsx";
 export default function App({ Component }: PageProps) {
   return (
     <html lang="de">
@@ -11,7 +10,6 @@ export default function App({ Component }: PageProps) {
         <link rel="stylesheet" href="/api/res/tailwind.css" />
       </head>
       <body>
-        <Header />
         <Component />
       </body>
     </html>
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
new file mode 100644
index 0000000..1519e53
--- /dev/null
+++ b/routes/_layout.tsx
@@ -0,0 +1,11 @@
+import { PageProps } from "$fresh/server.ts";
+import Header from "../components/Header.tsx";
+
+export default function Layout({ Component, state }: PageProps) {
+  return (
+    <div>
+      <Header />
+      <Component />
+    </div>
+  );
+}
diff --git a/routes/create.tsx b/routes/create.tsx
index 9bafa2c..caa8af0 100644
--- a/routes/create.tsx
+++ b/routes/create.tsx
@@ -1,5 +1,6 @@
 import CreateSecret from "@/islands/CreateSecret.tsx";
 import Log from "@/islands/Log.tsx";
+import Card from "@/islands/ui/Card.tsx";
 
 export default function CreateSecretPage() {
   return (
diff --git a/static/styles.css b/static/styles.css
index c6a4ad6..95d13fb 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -4,9 +4,7 @@
 *::after {
   box-sizing: border-box;
 }
-* {
-  margin: 0;
-}
+
 button {
   color: inherit;
 }
@@ -70,4 +68,4 @@ html {
 
 #duration input {
   width: 6ch;
-}
\ No newline at end of file
+}

From d8cca14fb83078e8c67b29324422610fd1b352ae Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 13:49:49 +0200
Subject: [PATCH 02/15] fix missing input ids

---
 components/CreateSecret/ExpireForm.tsx      | 1 +
 components/CreateSecret/PassphraseInput.tsx | 1 +
 components/CreateSecret/ViewCount.tsx       | 1 +
 3 files changed, 3 insertions(+)

diff --git a/components/CreateSecret/ExpireForm.tsx b/components/CreateSecret/ExpireForm.tsx
index 33319c9..55a5d0a 100644
--- a/components/CreateSecret/ExpireForm.tsx
+++ b/components/CreateSecret/ExpireForm.tsx
@@ -8,6 +8,7 @@ export default function ExpireForm() {
       <input
         type="checkbox"
         name="customExpireIn"
+        id="customExpireIn"
         checked={isCustomExpireIn.value}
         onChange={() => {
           isCustomExpireIn.value = !isCustomExpireIn.value;
diff --git a/components/CreateSecret/PassphraseInput.tsx b/components/CreateSecret/PassphraseInput.tsx
index bea3bfe..c0a5edd 100644
--- a/components/CreateSecret/PassphraseInput.tsx
+++ b/components/CreateSecret/PassphraseInput.tsx
@@ -8,6 +8,7 @@ export default function PassphraseInput() {
       <input
         type="checkbox"
         name="usePassphrase"
+        id="usePassphrase"
         checked={usePassphrase.value}
         onChange={() => {
           usePassphrase.value = !usePassphrase.value;
diff --git a/components/CreateSecret/ViewCount.tsx b/components/CreateSecret/ViewCount.tsx
index a90b4ec..b4eefc5 100644
--- a/components/CreateSecret/ViewCount.tsx
+++ b/components/CreateSecret/ViewCount.tsx
@@ -9,6 +9,7 @@ export default function ViewCountInput() {
       <input
         type="checkbox"
         name="useViewCount"
+        id="useViewCount"
         checked={useViewCount.value}
         onChange={() => {
           useViewCount.value = !useViewCount.value;

From b064b7d6ddf9dae10a042182d471ff27766d9e46 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:08:00 +0200
Subject: [PATCH 03/15] improve responsive label handling

---
 components/CreateSecret/ExpireForm.tsx      | 8 ++++++--
 components/CreateSecret/PassphraseInput.tsx | 3 +--
 components/CreateSecret/ViewCount.tsx       | 8 ++++++--
 islands/CreateSecret.tsx                    | 2 +-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/CreateSecret/ExpireForm.tsx b/components/CreateSecret/ExpireForm.tsx
index 55a5d0a..19852f0 100644
--- a/components/CreateSecret/ExpireForm.tsx
+++ b/components/CreateSecret/ExpireForm.tsx
@@ -14,8 +14,12 @@ export default function ExpireForm() {
           isCustomExpireIn.value = !isCustomExpireIn.value;
         }}
       />
-      <label class="mt-4" for="customExpireIn">
-        Eigene Ablaufzeit <br /> (default: 1 Tag)
+      <label
+        for="customExpireIn"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Eigene Ablaufzeit</span>
+        <span>(default: 1 Tag)</span>
       </label>
       {isCustomExpireIn.value && (
         <>
diff --git a/components/CreateSecret/PassphraseInput.tsx b/components/CreateSecret/PassphraseInput.tsx
index c0a5edd..3b0430a 100644
--- a/components/CreateSecret/PassphraseInput.tsx
+++ b/components/CreateSecret/PassphraseInput.tsx
@@ -15,8 +15,7 @@ export default function PassphraseInput() {
         }}
       />
       <label for="usePassphrase">
-        Eigene Passphrase verwenden um das Secret zu verschlüsseln <br />
-        (optional)
+        <span>Eigene Passphrase für Verschlüsselung verwenden (optional)</span>
       </label>
       {usePassphrase.value && (
         <>
diff --git a/components/CreateSecret/ViewCount.tsx b/components/CreateSecret/ViewCount.tsx
index b4eefc5..15e77a9 100644
--- a/components/CreateSecret/ViewCount.tsx
+++ b/components/CreateSecret/ViewCount.tsx
@@ -15,8 +15,12 @@ export default function ViewCountInput() {
           useViewCount.value = !useViewCount.value;
         }}
       />
-      <label for="useViewCount">
-        Anzeigelimit ändern <br /> (default: 1)
+      <label
+        for="useViewCount"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Anzeigelimit ändern</span>
+        <span>(default: 1)</span>
       </label>
       {useViewCount.value && (
         <>
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 3a57b9f..4d10e33 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -28,7 +28,7 @@ export default function CreateSecret() {
           placeholder="Passwort, Token oder andere Information..."
         />
 
-        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%]">
+        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%] mt-4">
           <ExpireForm />
           <PassphraseInput />
           <ViewCount />

From 413d575a94970b9646f32e66084e856a44c3546e Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:09:08 +0200
Subject: [PATCH 04/15] rename ExpireForm to CustomExpireInForm

---
 .../CreateSecret/{ExpireForm.tsx => CustomExpireInForm.tsx}   | 2 +-
 islands/CreateSecret.tsx                                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename components/CreateSecret/{ExpireForm.tsx => CustomExpireInForm.tsx} (93%)

diff --git a/components/CreateSecret/ExpireForm.tsx b/components/CreateSecret/CustomExpireInForm.tsx
similarity index 93%
rename from components/CreateSecret/ExpireForm.tsx
rename to components/CreateSecret/CustomExpireInForm.tsx
index 19852f0..a540fc0 100644
--- a/components/CreateSecret/ExpireForm.tsx
+++ b/components/CreateSecret/CustomExpireInForm.tsx
@@ -2,7 +2,7 @@ import { signal } from "@preact/signals";
 import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
 const isCustomExpireIn = signal(false);
 
-export default function ExpireForm() {
+export default function CustomExpireInForm() {
   return (
     <>
       <input
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 4d10e33..b2d4b3d 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -1,5 +1,5 @@
 import onSubmit from "@/src/formHandler/create.ts";
-import ExpireForm from "@/components/CreateSecret/ExpireForm.tsx";
+import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
 import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
 import ViewCount from "@/components/CreateSecret/ViewCount.tsx";
 
@@ -29,7 +29,7 @@ export default function CreateSecret() {
         />
 
         <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%] mt-4">
-          <ExpireForm />
+          <CustomExpireInForm />
           <PassphraseInput />
           <ViewCount />
         </div>

From d84c9c80ed09c141e1d2aa9cd92146c78c6627be Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:10:12 +0200
Subject: [PATCH 05/15] rename ViewCount to ViewCountLimitInput

---
 .../CreateSecret/{ViewCount.tsx => ViewCountLimitInput.tsx}   | 2 +-
 islands/CreateSecret.tsx                                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename components/CreateSecret/{ViewCount.tsx => ViewCountLimitInput.tsx} (92%)

diff --git a/components/CreateSecret/ViewCount.tsx b/components/CreateSecret/ViewCountLimitInput.tsx
similarity index 92%
rename from components/CreateSecret/ViewCount.tsx
rename to components/CreateSecret/ViewCountLimitInput.tsx
index 15e77a9..1ddf998 100644
--- a/components/CreateSecret/ViewCount.tsx
+++ b/components/CreateSecret/ViewCountLimitInput.tsx
@@ -3,7 +3,7 @@ import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
 
 const useViewCount = signal(false);
 
-export default function ViewCountInput() {
+export default function ViewCountLimitInput() {
   return (
     <>
       <input
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index b2d4b3d..216a38c 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -1,7 +1,7 @@
 import onSubmit from "@/src/formHandler/create.ts";
 import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
 import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
-import ViewCount from "@/components/CreateSecret/ViewCount.tsx";
+import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx";
 
 export default function CreateSecret() {
   return (
@@ -31,7 +31,7 @@ export default function CreateSecret() {
         <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%] mt-4">
           <CustomExpireInForm />
           <PassphraseInput />
-          <ViewCount />
+          <ViewCountLimitInput />
         </div>
 
         <button class="p-2 self-stretch" type="submit">Anlegen</button>

From d9432720a241c6aeb7bc410ae629aae3056ffa48 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:13:11 +0200
Subject: [PATCH 06/15] fix layout in custom expire in form

---
 .../CreateSecret/CustomExpireInForm.tsx       | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/components/CreateSecret/CustomExpireInForm.tsx b/components/CreateSecret/CustomExpireInForm.tsx
index a540fc0..a1f396c 100644
--- a/components/CreateSecret/CustomExpireInForm.tsx
+++ b/components/CreateSecret/CustomExpireInForm.tsx
@@ -26,30 +26,34 @@ export default function CustomExpireInForm() {
           <div>
             {/* placeholder div to keep the first grid column empty */}
           </div>
-          <form id="duration">
-            <input
-              class="p-2 border-2 border-gray-500 rounded"
-              id="h"
-              name="h"
-              type="number"
-              min="0"
-              max="999"
-              value={0}
-              onWheel={scrollNumberInputValue}
-            />
-            <label for="h">h</label>
-            &nbsp;
-            <input
-              class="p-2 border-2 border-gray-500 rounded"
-              id="m"
-              name="m"
-              type="number"
-              min="0"
-              max="59"
-              value={0}
-              onWheel={scrollNumberInputValue}
-            />
-            <label for="m">m</label>
+          <form id="duration" class="flex flex-row gap-2 justify-center">
+            <label for="h">
+              <input
+                class="p-2 border-2 border-gray-500 rounded"
+                id="h"
+                name="h"
+                type="number"
+                min="0"
+                max="999"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;h
+            </label>
+
+            <label for="m">
+              <input
+                class="p-2 border-2 border-gray-500 rounded"
+                id="m"
+                name="m"
+                type="number"
+                min="0"
+                max="59"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;m
+            </label>
           </form>
         </>
       )}

From eba1014b42cd1ab63da1628ab6e7485d1f837a1c Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:17:58 +0200
Subject: [PATCH 07/15] improve expireIn form layout

---
 components/CreateSecret/CustomExpireInForm.tsx | 9 ++++++---
 static/styles.css                              | 9 ---------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/CreateSecret/CustomExpireInForm.tsx b/components/CreateSecret/CustomExpireInForm.tsx
index a1f396c..808bdc8 100644
--- a/components/CreateSecret/CustomExpireInForm.tsx
+++ b/components/CreateSecret/CustomExpireInForm.tsx
@@ -26,10 +26,13 @@ export default function CustomExpireInForm() {
           <div>
             {/* placeholder div to keep the first grid column empty */}
           </div>
-          <form id="duration" class="flex flex-row gap-2 justify-center">
+          <form
+            id="duration"
+            class="flex flex-row gap-4 justify-center-safe"
+          >
             <label for="h">
               <input
-                class="p-2 border-2 border-gray-500 rounded"
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
                 id="h"
                 name="h"
                 type="number"
@@ -43,7 +46,7 @@ export default function CustomExpireInForm() {
 
             <label for="m">
               <input
-                class="p-2 border-2 border-gray-500 rounded"
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
                 id="m"
                 name="m"
                 type="number"
diff --git a/static/styles.css b/static/styles.css
index 95d13fb..8ff83df 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -60,12 +60,3 @@ html {
 .tabular-nums {
   font-variant-numeric: tabular-nums;
 }
-
-#duration {
-  display: flex;
-  justify-content: space-between;
-}
-
-#duration input {
-  width: 6ch;
-}

From 3881812769be26b6768be9700ad275e8602c0e40 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:24:40 +0200
Subject: [PATCH 08/15] improve log display on createSecret page

---
 islands/Log.tsx              | 13 ++++++++++---
 islands/messages/CardMsg.tsx |  2 +-
 routes/create.tsx            |  3 +--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 12c5017..a3f836a 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -1,6 +1,7 @@
 import { lastMessage, RichMessage } from "@/src/utils/log.ts";
 import CardMsg from "./messages/CardMsg.tsx";
 import ErrorCardMsg from "./messages/ErrorCardMsg.tsx";
+import { twJoin } from "tailwind-merge";
 
 function renderMessage(message: RichMessage | undefined) {
   if (!message) {
@@ -32,7 +33,7 @@ function renderMessage(message: RichMessage | undefined) {
       return (
         <CardMsg header={message.header} extraInfo={message.extraInfo}>
           <a
-            class="text-primary-dark text-lg"
+            class="text-primary-dark text-lg wrap-anywhere"
             href={message.secretLink}
             target="_blank"
           >
@@ -43,6 +44,12 @@ function renderMessage(message: RichMessage | undefined) {
   }
 }
 
-export default function Log() {
-  return <div>{renderMessage(lastMessage.value)}</div>;
+export default function Log(props: { class?: string }) {
+  const classes = twJoin("max-w-[90%]", props.class);
+
+  return (
+    <div class={classes}>
+      {renderMessage(lastMessage.value)}
+    </div>
+  );
 }
diff --git a/islands/messages/CardMsg.tsx b/islands/messages/CardMsg.tsx
index 3a99b58..e8bf131 100644
--- a/islands/messages/CardMsg.tsx
+++ b/islands/messages/CardMsg.tsx
@@ -8,7 +8,7 @@ export default function CardMsg(
   },
 ) {
   return (
-    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-gray-200">
+    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 border-[1px] border-gray-200">
       {props.header && <h3 class="text-lg font-bold">{props.header}</h3>}
       {props.extraInfo && <p>{props.extraInfo}</p>}
       {props.children}
diff --git a/routes/create.tsx b/routes/create.tsx
index caa8af0..b69c3b3 100644
--- a/routes/create.tsx
+++ b/routes/create.tsx
@@ -1,12 +1,11 @@
 import CreateSecret from "@/islands/CreateSecret.tsx";
 import Log from "@/islands/Log.tsx";
-import Card from "@/islands/ui/Card.tsx";
 
 export default function CreateSecretPage() {
   return (
     <main class="flex flex-col items-center justify-center">
+      <Log class="mt-4" />
       <CreateSecret />
-      <Log />
     </main>
   );
 }

From 47b8cc4f07ce585a9de473c597cc89399c2de1ad Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:26:32 +0200
Subject: [PATCH 09/15] improve max-w of Log component

---
 islands/Log.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index a3f836a..5049d62 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -45,7 +45,7 @@ function renderMessage(message: RichMessage | undefined) {
 }
 
 export default function Log(props: { class?: string }) {
-  const classes = twJoin("max-w-[90%]", props.class);
+  const classes = twJoin("max-w-[90%] md:max-w-2xl", props.class);
 
   return (
     <div class={classes}>

From 0fd0326f63549693d4ca261d80370cbb5b844d61 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:37:49 +0200
Subject: [PATCH 10/15] improve flexbox design on createSecret island

---
 islands/CreateSecret.tsx | 12 +++++++-----
 static/styles.css        |  7 ++-----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 216a38c..8383ae2 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -5,14 +5,14 @@ import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.
 
 export default function CreateSecret() {
   return (
-    <section>
+    <section class="w-full max-w-[90%] md:max-w-2xl">
       <h2 class="my-4 text-2xl font-bold items-center flex flex-col">
         Erstelle ein neues Secret
       </h2>
       <form
         name="createSecret"
         method="post"
-        class="flex flex-col items-center"
+        class="flex flex-col items-stretch gap-4"
         onSubmit={onSubmit}
         autocomplete="off"
       >
@@ -24,17 +24,19 @@ export default function CreateSecret() {
         />
         <textarea
           name="secret"
-          class="w-[90%] min-h-40 p-2 border-2 border-gray-500 rounded"
+          class="min-h-40 md:min-h-60 p-2 border-2 border-gray-500 rounded"
           placeholder="Passwort, Token oder andere Information..."
         />
 
-        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center justify-center w-[90%] mt-4">
+        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center">
           <CustomExpireInForm />
           <PassphraseInput />
           <ViewCountLimitInput />
         </div>
 
-        <button class="p-2 self-stretch" type="submit">Anlegen</button>
+        <button class="p-2" type="submit">
+          Anlegen
+        </button>
       </form>
     </section>
   );
diff --git a/static/styles.css b/static/styles.css
index 8ff83df..65beac6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -5,16 +5,13 @@
   box-sizing: border-box;
 }
 
-button {
-  color: inherit;
-}
 button, [role="button"] {
   cursor: pointer;
 }
+
 button {
   background-color: transparent;
-  padding: 4;
-  margin: 1em;
+  padding: 0.5rem;
   border: 1px solid black;
   border-radius: 4px;
   font-size: 1em;

From 95b7dd971be2482643f8c07f16eba2b9fa5a8d94 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:39:17 +0200
Subject: [PATCH 11/15] set min width of the body to 220px, because the
 "SecretShare" heading is that wide

---
 routes/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routes/_app.tsx b/routes/_app.tsx
index fd4a5fc..5c4090e 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -9,7 +9,7 @@ export default function App({ Component }: PageProps) {
         <link rel="stylesheet" href="/styles.css" />
         <link rel="stylesheet" href="/api/res/tailwind.css" />
       </head>
-      <body>
+      <body class="min-w-[220px]">
         <Component />
       </body>
     </html>

From f0c17f86c52f899e81baa910bd2dad40653e7cf7 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:42:33 +0200
Subject: [PATCH 12/15] add default margin at the bottom of the body

---
 routes/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routes/_app.tsx b/routes/_app.tsx
index 5c4090e..28465a9 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -9,7 +9,7 @@ export default function App({ Component }: PageProps) {
         <link rel="stylesheet" href="/styles.css" />
         <link rel="stylesheet" href="/api/res/tailwind.css" />
       </head>
-      <body class="min-w-[220px]">
+      <body class="min-w-[220px] mb-8">
         <Component />
       </body>
     </html>

From 951aa1128256cab78ae22677a59e6075e9ba5ff8 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:50:45 +0200
Subject: [PATCH 13/15] improve basic layout of fetchSecret

---
 routes/secret/[uuid].tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/routes/secret/[uuid].tsx b/routes/secret/[uuid].tsx
index 0e4de26..19376c6 100644
--- a/routes/secret/[uuid].tsx
+++ b/routes/secret/[uuid].tsx
@@ -6,12 +6,16 @@ export default function UUID(props: PageProps) {
   const { uuid } = props.params;
   const encryptionKey = atob(props.url.searchParams.get("encryptionKey") || "");
   return (
-    <main class="flex flex-col items-center justify-center">
-      <h2>Secret abrufen</h2>
-      <p>UUID: {uuid}</p>
-      <p>
+    <main class="flex flex-col items-center justify-center w-full max-w-[90%] md:max-w-2xl gap-4 mx-auto">
+      <h2 class="mt-6 text-2xl font-bold items-center flex flex-col">
+        Secret abrufen
+      </h2>
+      <p class="font-bold wrap-anywhere text-center">UUID: {uuid}</p>
+      <p class="text-balance text-center">
         Mit dem Klick auf den nachfolgenden Button wird das Secret abgerufen.
-        Danach ist dieses <strong>nicht</strong> mehr abrufbar.
+        Danach ist dieses{" "}
+        <strong class="underline underline-offset-2">nicht</strong>{" "}
+        mehr abrufbar!
       </p>
       <FetchSecret uuid={uuid} encryptionKey={encryptionKey} />
       <Log />

From c08895b97f6b98db156f679c1f4fbfc4dae1bc73 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:53:50 +0200
Subject: [PATCH 14/15] improve secret data display

---
 islands/Log.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 5049d62..32d2513 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -24,7 +24,7 @@ function renderMessage(message: RichMessage | undefined) {
     case "secretFetch":
       return (
         <CardMsg header="Secret Data" extraInfo={message.extraInfo}>
-          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] min-w-md">
+          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] w-full">
             {message.secret}
           </pre>
         </CardMsg>
@@ -45,7 +45,7 @@ function renderMessage(message: RichMessage | undefined) {
 }
 
 export default function Log(props: { class?: string }) {
-  const classes = twJoin("max-w-[90%] md:max-w-2xl", props.class);
+  const classes = twJoin("w-full max-w-[90%] md:max-w-2xl", props.class);
 
   return (
     <div class={classes}>

From 4a1b564a51b75ba064cadead980dade5d1b8f7bf Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Wed, 16 Jul 2025 14:57:19 +0200
Subject: [PATCH 15/15] improve box styles

---
 islands/messages/CardMsg.tsx      | 2 +-
 islands/messages/ErrorCardMsg.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/islands/messages/CardMsg.tsx b/islands/messages/CardMsg.tsx
index e8bf131..4b6e246 100644
--- a/islands/messages/CardMsg.tsx
+++ b/islands/messages/CardMsg.tsx
@@ -8,7 +8,7 @@ export default function CardMsg(
   },
 ) {
   return (
-    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 border-[1px] border-gray-200">
+    <div class="flex flex-col items-start justify-center gap-2 rounded-lg p-4 border-2 border-gray-300">
       {props.header && <h3 class="text-lg font-bold">{props.header}</h3>}
       {props.extraInfo && <p>{props.extraInfo}</p>}
       {props.children}
diff --git a/islands/messages/ErrorCardMsg.tsx b/islands/messages/ErrorCardMsg.tsx
index 63ddc17..8df7db8 100644
--- a/islands/messages/ErrorCardMsg.tsx
+++ b/islands/messages/ErrorCardMsg.tsx
@@ -8,9 +8,9 @@ export default function CardMsg(
   },
 ) {
   return (
-    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-red-200 shadow-red-500/50">
+    <div class="flex flex-col items-start justify-center gap-2 rounded-lg p-4 max-w-2xl border-2 border-red-400 ">
       {props.header && (
-        <h3 class="text-lg font-bold text-red-600">{props.header}</h3>
+        <h3 class="text-lg font-bold text-red-500">{props.header}</h3>
       )}
       {props.extraInfo && <p>{props.extraInfo}</p>}
       {props.children}