Characters are slightly chipped when inputting a small number of double-byte characters

[yasuking0304]

The problem

Characters are slightly chipped when inputting a small number of double-byte characters.

Release version

Latest

Operating system

Windows Chome	Windows Edge(Chomium)	Windows Firefox	MacOS Safari	MacOS Chome	iPadOS Safari	iPhone Safari	Android Chome	Android Samsung Beower(Chromium)
NG	NG	NG	No Problem	NG	No Problem	No Problem	NG	NG

Steps to reproduce the behavior

Enter a double-byte character (e.g., "あ") in the search input box.

Log files

No response

Screenshots

Window Edge, Firefox and Android Chrome(Remote debuggiing)

Additional context

↓It is calculated in the updateSearchBoxWidth function, but it is slightly narrower
https://github.com/xicri/genshin-dictionary/blob/main/components/elastic-searchbox.vue#L40-L46

    el.style.width = `${textLength * 1.05}em`;

A slight increase to 1.05 is fine.
However, I feel that it is okay to just remove the updateSearchBoxWidth function and set width: 100% in css

https://github.com/xicri/genshin-dictionary/blob/main/components/word-list-search.vue#L216-L218
↓

  &__input {
    flex-shrink: 0;
    width: 100%;  ← add
  }

[xicri]

Thanks, this is a bug that I couldn't fix when I implement this.
I will try your solution to fix this.

[xicri]

I tried your solutions today, but I reminded that I tried them when I implemented this search box and both solutions didn't work as expected. I tried again today, and I confirmed they didn't work.

Additional context

↓It is calculated in the updateSearchBoxWidth function, but it is slightly narrower
https://github.com/xicri/genshin-dictionary/blob/main/components/elastic-searchbox.vue#L40-L46

    el.style.width = `${textLength * 1.05}em`;

A slight increase to 1.05 is fine.

With this solution, the width of <input> element gets too long when you enter long text. (e.g. "らいでんしょうぐんにてんせいしたら、てんかむてきになった")

However, I feel that it is okay to just remove the updateSearchBoxWidth function and set width: 100% in css
https://github.com/xicri/genshin-dictionary/blob/main/components/word-list-search.vue#L216-L218
↓

  &__input {
    flex-shrink: 0;
    width: 100%;  ← add
  }

This solution also cause a scrolling issue when you add a long text. Tags and the query text are separatedly scroll.

(Sorry, these explanations are probably hard to understand. I will add more details if I have time and motivation... 🙏)

---

Currently, I'm rewriting the search input with contenteditable, but the progress is not good.
I heard an opinion that contenteditable is too complex just for adding rich components like tags, so I'm wondering if I should consider different approach without contenteditable.

I also considered to use a text input component library to allow adding something like the tags, but I have not found such library yet.
Let me know if you find such a library. Unmaintained or non-Vue components may help me too.