From 899cf2040814791430b8ccbe636e01dd57e90a0c Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Fri, 27 Oct 2023 11:26:48 +0100
Subject: [PATCH] Improve text inputs

---
 src/components/RedirectCreator.svelte | 4 ++--
 src/components/RedirectRow.svelte     | 4 ++--
 src/components/RouteCreator.svelte    | 4 ++--
 src/components/RouteRow.svelte        | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/RedirectCreator.svelte b/src/components/RedirectCreator.svelte
index 5a73d64..6467654 100644
--- a/src/components/RedirectCreator.svelte
+++ b/src/components/RedirectCreator.svelte
@@ -8,8 +8,8 @@
 </script>
 
 <tr class="created">
-  <td><input type="text" class="code-font" bind:value={redirect.src} size={redirect.src.length + 2} /></td>
-  <td><input type="text" class="code-font" bind:value={redirect.dst} size={redirect.dst.length + 2} /></td>
+  <td><input type="text" class="code-font" bind:value={redirect.src} size={Math.max(20, redirect.src.length + 2)} /></td>
+  <td><input type="text" class="code-font" bind:value={redirect.dst} size={Math.max(20, redirect.dst.length + 2)} /></td>
   <td><Flags value={redirect.flags} editable keys={redirectKeys} /></td>
   <td><input type="checkbox" bind:checked={redirect.active} /></td>
   <td>
diff --git a/src/components/RedirectRow.svelte b/src/components/RedirectRow.svelte
index 740748c..92be98e 100644
--- a/src/components/RedirectRow.svelte
+++ b/src/components/RedirectRow.svelte
@@ -13,7 +13,7 @@
 {#if noCPair(redirect)}
   <tr class="deleted">
     <td class="code-font"><a href="https://{redirect.server.src}" target="_blank">{redirect.server.src}</a></td>
-    <td><input type="text" class="code-font" disabled bind:value={redirect.server.dst} size={redirect.server.dst.length + 2} /></td>
+    <td><input type="text" class="code-font" disabled bind:value={redirect.server.dst} size={Math.max(20, redirect.server.dst.length + 2)} /></td>
     <td><Flags value={redirect.server.flags} keys={redirectKeys} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRedirect()}>Restore</button></td>
@@ -21,7 +21,7 @@
 {:else}
   <tr class:created={noSPair(redirect)} class:modified={!noSPair(redirect) && !redirectEqual(redirect.client, redirect.server)}>
     <td class="code-font"><a href="https://{redirect.client.src}" target="_blank">{redirect.client.src}</a></td>
-    <td><input type="text" class="code-font" bind:value={redirect.client.dst} size={redirect.client.dst.length + 2} /></td>
+    <td><input type="text" class="code-font" bind:value={redirect.client.dst} size={Math.max(20, redirect.client.dst.length + 2)} /></td>
     <td><Flags bind:value={redirect.client.flags} editable keys={redirectKeys} /></td>
     <td><input type="checkbox" bind:checked={redirect.client.active} /></td>
     <td>
diff --git a/src/components/RouteCreator.svelte b/src/components/RouteCreator.svelte
index 59987be..40276ac 100644
--- a/src/components/RouteCreator.svelte
+++ b/src/components/RouteCreator.svelte
@@ -8,8 +8,8 @@
 </script>
 
 <tr class="created">
-  <td><input type="text" class="code-font" bind:value={route.src} size={route.src.length + 2} /></td>
-  <td><input type="text" class="code-font" bind:value={route.dst} size={route.dst.length + 2} /></td>
+  <td><input type="text" class="code-font" bind:value={route.src} size={Math.max(20, route.src.length + 2)} /></td>
+  <td><input type="text" class="code-font" bind:value={route.dst} size={Math.max(20, route.dst.length + 2)} /></td>
   <td><Flags value={route.flags} editable keys={routeKeys} /></td>
   <td><input type="checkbox" bind:checked={route.active} /></td>
   <td>
diff --git a/src/components/RouteRow.svelte b/src/components/RouteRow.svelte
index 6eb093d..0195b4a 100644
--- a/src/components/RouteRow.svelte
+++ b/src/components/RouteRow.svelte
@@ -13,7 +13,7 @@
 {#if noCPair(route)}
   <tr class="deleted">
     <td class="code-font"><a href="https://{route.server.src}" target="_blank">{route.server.src}</a></td>
-    <td><input type="text" class="code-font" disabled bind:value={route.server.dst} size={route.server.dst.length + 2} /></td>
+    <td><input type="text" class="code-font" disabled bind:value={route.server.dst} size={Math.max(20, route.server.dst.length + 2)} /></td>
     <td><Flags value={route.server.flags} keys={routeKeys} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRoute()}>Restore</button></td>
@@ -21,7 +21,7 @@
 {:else}
   <tr class:created={noSPair(route)} class:modified={!noSPair(route) && !routeEqual(route.client, route.server)}>
     <td class="code-font"><a href="https://{route.client.src}" target="_blank">{route.client.src}</a></td>
-    <td><input type="text" class="code-font" bind:value={route.client.dst} size={route.client.dst.length + 2} /></td>
+    <td><input type="text" class="code-font" bind:value={route.client.dst} size={Math.max(20, route.client.dst.length + 2)} /></td>
     <td><Flags bind:value={route.client.flags} editable keys={routeKeys} /></td>
     <td><input type="checkbox" bind:checked={route.client.active} /></td>
     <td>