Tag display layout is slightly distorted on Android Chrome

[yasuking0304]

The problem

Tag display layout is slightly distorted on Android Chrome.

Release version

Latest

Operating system

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

Steps to reproduce the behavior

None

Log files

No response

Screenshots

Android Chrome(Remote debuggiing)

Additional context

The system font set is not specified properly.

This can be resolved by adding the following system font specification:

https://github.com/xicri/genshin-dictionary/blob/main/assets/styles/global.scss#L3-L4

html {
  font-family: "Noto Sans CJK JP", "Meiryo", "Hiragino Sans", sans-serif;

↓

html {
  font-family: system-ui, -apple-system, "Noto Sans CJK JP", "Meiryo", "Hiragino Sans", sans-serif;

[yasuking0304]

I checked it when I had time, and it seems that android chrome and sans-serif don't work well together.

Also, if you put system-ui at the top, Meiryo UI seems to be used as the Windows font, which isn't very good.

As a result, it seems best to put "system-ui" and "-apple-system" before "sans-serif".
https://github.com/xicri/genshin-dictionary/blob/main/assets/styles/global.scss#L3-L4

html {
  font-family: "Noto Sans CJK JP", "Meiryo", "Hiragino Sans", sans-serif;

↓

html {
  font-family: "Noto Sans CJK JP", "Meiryo", "Hiragino Sans", system-ui, -apple-system, sans-serif;