From d28bbef4a3ef9f3844ff8cd79640cd3f688df2bb Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 17 Jul 2026 23:16:03 +0100
Subject: [PATCH 1/2] fix(a11y): improve accessibility

---
 package.json             |  3 +-
 src/components/App.tsx   | 74 +++++++++++++---------------------------
 src/layouts/Layout.astro |  5 +--
 3 files changed, 26 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index 58a3cb7..933a0c1 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,9 @@
     "build": "astro build",
     "deploy": "wrangler deploy",
     "dev": "astro dev",
-    "format": "biome check --write --linter-enabled=false",
+    "format": "biome check --write",
     "lint": "biome check",
+    "preview": "astro preview",
     "test": "bun test",
     "typecheck": "tsc --noEmit"
   },
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0b5202e..eec71b8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -235,6 +235,17 @@ export default function App() {
               Limit Results (max 3000)
             </label>
             <div class="flex">
+              <button
+                type="button"
+                aria-label="Decrease limit by 50"
+                onClick={() => {
+                  const current = parseInt(limitInput(), 10) || 0;
+                  setLimitInput(Math.max(1, current - 50).toString());
+                }}
+                class="px-4 text-lg font-medium bg-slate-900 hover:bg-slate-800 active:bg-slate-700 text-slate-400 hover:text-white transition-colors cursor-pointer flex items-center justify-center rounded-l-xl border border-r-0 border-slate-800"
+              >
+                −
+              </button>
               <input
                 type="number"
                 id="limitInput"
@@ -252,58 +263,19 @@ export default function App() {
                 onKeyPress={(e) => {
                   if (e.key === "Enter") startAnalysis();
                 }}
-                class="w-full px-4 py-2.5 bg-slate-950/60 border border-r-0 border-slate-800 rounded-l-xl text-slate-100 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 focus:outline-none transition-all duration-200 shadow-inner [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                class="w-full px-4 py-2.5 text-center bg-slate-950/60 border border-l-0 border-r-0 border-slate-800 text-slate-100 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 focus:outline-none transition-all duration-200 shadow-inner [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
               />
-              <div class="flex flex-col border border-slate-800 rounded-r-xl overflow-hidden bg-slate-900 shrink-0">
-                <button
-                  type="button"
-                  aria-label="Increase limit by 50"
-                  onClick={() => {
-                    const current = parseInt(limitInput(), 10) || 0;
-                    setLimitInput(Math.min(3000, current + 50).toString());
-                  }}
-                  class="flex-1 px-3 bg-slate-900 hover:bg-slate-800 active:bg-slate-700 text-slate-400 hover:text-white transition-colors border-b border-slate-800/80 cursor-pointer flex items-center justify-center"
-                >
-                  <svg
-                    class="w-3 h-3"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <title>Increase limit</title>
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2.5"
-                      d="M5 15l7-7 7 7"
-                    />
-                  </svg>
-                </button>
-                <button
-                  type="button"
-                  aria-label="Decrease limit by 50"
-                  onClick={() => {
-                    const current = parseInt(limitInput(), 10) || 0;
-                    setLimitInput(Math.max(1, current - 50).toString());
-                  }}
-                  class="flex-1 px-3 bg-slate-900 hover:bg-slate-800 active:bg-slate-700 text-slate-400 hover:text-white transition-colors cursor-pointer flex items-center justify-center"
-                >
-                  <svg
-                    class="w-3 h-3"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <title>Decrease limit</title>
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2.5"
-                      d="M19 9l-7 7-7-7"
-                    />
-                  </svg>
-                </button>
-              </div>
+              <button
+                type="button"
+                aria-label="Increase limit by 50"
+                onClick={() => {
+                  const current = parseInt(limitInput(), 10) || 0;
+                  setLimitInput(Math.min(3000, current + 50).toString());
+                }}
+                class="px-4 text-lg font-medium bg-slate-900 hover:bg-slate-800 active:bg-slate-700 text-slate-400 hover:text-white transition-colors cursor-pointer flex items-center justify-center rounded-r-xl border border-l-0 border-slate-800"
+              >
+                +
+              </button>
             </div>
           </div>
           <button
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f276ade..f84e4f7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,10 +16,7 @@ const { title, description } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="referrer" content="no-referrer-when-downgrade" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>{title}</title>
     <meta name="description" content={description} />

From f11854915f0c3f3a424f9c9d0fcedc3d90c90d25 Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 17 Jul 2026 23:30:55 +0100
Subject: [PATCH 2/2] Update App.tsx

---
 src/components/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index eec71b8..ef96c24 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -454,7 +454,7 @@ export default function App() {
                 <For each={resultsItems()}>
                   {(pkg, i) => (
                     <tr class="hover:bg-slate-800/40 transition-colors duration-150 h-14">
-                      <td class="px-6 py-4 text-slate-500 font-mono text-xs">
+                      <td class="px-6 py-4 text-slate-400 font-mono text-xs">
                         {i() + 1}
                       </td>
                       <td class="px-6 py-4 text-slate-300 font-medium">