From 2637eac1626a27ff918eb8c34fb9dd89d0d287e3 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Thu, 8 Aug 2024 05:33:34 +0400
Subject: [PATCH 1/2] Fixed `Enter` and `Backspace` getting missed on mobile
 devices

---
 .../web-components/TagsEditor.svelte           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/web-components/TagsEditor.svelte b/src/components/web-components/TagsEditor.svelte
index a1228fc..1128683 100644
--- a/src/components/web-components/TagsEditor.svelte
+++ b/src/components/web-components/TagsEditor.svelte
@@ -59,15 +59,19 @@
 
     /**
      * Handle adding new tags to the list or removing them when backspace is pressed.
+     *
+     * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
+     * empty, while usually it should contain proper button code.
+     *
      * @param {KeyboardEvent} event
      */
     function handleKeyPresses(event) {
-        if (event.code === 'Enter' && addedTagName.length) {
+        if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
             addTag(addedTagName)
             addedTagName = '';
         }
 
-        if (event.code === 'Backspace' && !addedTagName.length && tags?.length) {
+        if ((event.code === 'Backspace' || event.key === 'Backspace') && !addedTagName.length && tags?.length) {
             removeTag(tags[tags.length - 1]);
         }
     }
@@ -82,7 +86,11 @@
                   role="button" tabindex="0">x</span>
         </div>
     {/each}
-    <input type="text" bind:value={addedTagName} on:keydown={handleKeyPresses}/>
+    <input type="text"
+           bind:value={addedTagName}
+           on:keydown={handleKeyPresses}
+           autocomplete="off"
+           autocapitalize="none"/>
 </div>
 
 <style lang="scss">
@@ -90,5 +98,9 @@
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
+
+        input {
+            width: 100%;
+        }
     }
 </style>

From e325e51b4132727b612f5a620920d8fc49baaaac Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Thu, 8 Aug 2024 05:36:26 +0400
Subject: [PATCH 2/2] Stretch field to 100% of width

---
 src/components/ui/forms/TextField.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/ui/forms/TextField.svelte b/src/components/ui/forms/TextField.svelte
index a8b6fe0..2a2f54b 100644
--- a/src/components/ui/forms/TextField.svelte
+++ b/src/components/ui/forms/TextField.svelte
@@ -10,3 +10,9 @@
 </script>
 
 <input type="text" {name} {placeholder} bind:value={value}>
+
+<style lang="scss">
+    :global(.control) input {
+        width: 100%;
+    }
+</style>