From 46942a36b3f2a253353a53bbe6a7a7c6c43f7792 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 19 May 2025 20:05:35 +0600
Subject: [PATCH] web/SettingsInput: make input box fully clickable, fix radius
 of buttons

radius & inner padding on right were 1px off >:(
---
 .../components/settings/SettingsInput.svelte  | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/web/src/components/settings/SettingsInput.svelte b/web/src/components/settings/SettingsInput.svelte
index 90802e42..802b2159 100644
--- a/web/src/components/settings/SettingsInput.svelte
+++ b/web/src/components/settings/SettingsInput.svelte
@@ -62,7 +62,7 @@
         } else {
             validInput = new RegExp(regex[type]).test(inputValue);
         }
-    }
+    };
 
     const writeToSettings = (value: string, type: SettingsInputType) => {
         // we assume that the url is valid and error can't be thrown here
@@ -93,11 +93,7 @@
 </script>
 
 <div id="settings-input-holder">
-    <div
-        id="input-container"
-        class:focused={inputFocused}
-        aria-hidden="false"
-    >
+    <div id="input-container" class:focused={inputFocused} aria-hidden="false">
         <input
             class="input-box"
             bind:this={input}
@@ -135,7 +131,9 @@
                     class="button input-inner-button"
                     on:click={() => (inputHidden = !inputHidden)}
                     aria-label={$t(
-                        inputHidden ? "button.show_input" : "button.hide_input"
+                        inputHidden
+                            ? "button.show_input"
+                            : "button.hide_input"
                     )}
                 >
                     {#if inputHidden}
@@ -156,7 +154,9 @@
                 <button
                     class="button input-inner-button"
                     on:click={() => {
-                        inputValue = String($settings[settingContext][settingId]);
+                        inputValue = String(
+                            $settings[settingContext][settingId]
+                        );
                         checkInput();
                     }}
                     aria-label={$t("button.restore_input")}
@@ -167,11 +167,12 @@
         {/if}
     </div>
 
-    <div id="settings-input-buttons">
+    <div class="input-outer-buttons">
         <button
             class="button settings-input-button"
             aria-label={$t("button.save")}
-            disabled={inputValue === $settings[settingContext][settingId] || !validInput}
+            disabled={inputValue === $settings[settingContext][settingId] ||
+                !validInput}
             on:click={save}
         >
             <IconCheck />
@@ -186,8 +187,6 @@
     }
 
     #input-container {
-        padding: 0 16px;
-        padding-right: 4px;
         border-radius: var(--border-radius);
         color: var(--secondary);
         background-color: var(--button);
@@ -223,11 +222,16 @@
         white-space: nowrap;
     }
 
+    .input-box,
+    .input-placeholder {
+        padding-left: 16px;
+    }
+
     #input-container.focused {
         box-shadow: 0 0 0 2px var(--secondary) inset;
     }
 
-    #settings-input-buttons {
+    .input-outer-buttons {
         display: flex;
         flex-direction: row;
         gap: 6px;
@@ -254,11 +258,15 @@
         width: 34px;
         padding: 0;
         box-shadow: none;
-        /* 4px is padding outside of the button */
-        border-radius: calc(var(--border-radius) - 4px);
+        /* 3px is visual padding outside of the button */
+        border-radius: calc(var(--border-radius) - 3px);
         z-index: 1;
     }
 
+    .input-inner-button:last-child {
+        margin-right: 3px;
+    }
+
     .input-inner-button :global(svg) {
         height: 18px;
         width: 18px;