サイドバーのリンクをホバーするとレイアウトが崩れることがある

[munierujp]

改善詳細 / Details of Improvement

• サイドバーのリンクをホバーすると、文字の太さ（font-weight）が変化する
  • 場合によっては1行だったものが2行になり、レイアウトが崩れる

スクリーンショット / Screenshot

以下は、英語版をウインドウの横幅が充分にある状態で表示しているときの例です。

期待する見せ方・挙動 / Expected behavior

• サイドバーのリンクをホバーしてもレイアウトが崩れない
• ただし、リンクがクリック可能であることがわかる状態は維持する
  • 個人的にはホバー時にマウスカーソルがポインターに変化するだけでも充分だと思う
  • 不足であれば、ホバー時にアンダーラインを表示するようにする（「最新のお知らせ」に掲載されているリンクと同じ挙動）

動作環境・ブラウザ / Environment

• macOS Catalina 10.15.4
• Google Chrome 80.0.3987.163（Official Build） （64 ビット）

[mcdmaster]

a:hover で font-weight: bold をやっていると、Safari on macOS ではサイズが変わってしまうこともあるのですね…。
私は Win ユーザなので現物は見られないのですけど、イメージはつきます。

たとえば、フォントを太くする代わりに影をつけるといったやり方はいかがでしょうか？
ソースはこちらです。
https://dev.to/mingyena/fix-inline-elements-shifting-issue-in-bold-on-hover-4fb

(Added)
Mojave + Chrome 最新版で動かしてみたのですけれども、再現しませんでした…。
差し支えなければ、上記以外の再現環境がありましたら、お知らせいただけますと幸いです

[mcdmaster]

普段使わない MBP（おそらく Mid 2012 モデル）を Catalina Beta に上げてやったみたものの、やはりレイアウト崩れの再現は叶いませんでした…。

イシュークローズはせず、引き続き監視していくこととしましょう。あるいは、再現の詳細条件が特定できましたら、イシューのアップデートをお願いいたします

[munierujp]

追加情報として、別のMacでも確認しましたが同様でした。

• macOS Catalina 10.15.4
• Google Chrome 81.0.4044.92（Official Build） （64 ビット）

ホバー時、該当箇所のフォントは以下のようになっています。

[mcdmaster]

最初の方に出てくる :hover 処理

font-weight: 700

のところは、現行 development のものとは異なります、ちなみに、現行 development 版では font-weight: bold; になっています。
この二者は、いかなる場合においても同一の強調の仕方がされるべきと、もしも私がユーザの立場であればそう考えます。
あるいは、この二者はそもそも同じ意味なのでしょうか？

[munierujp]

https://dev-covid19-tokyo.netlify.app/en で確認しましたが、font-weight: bold;でも同様でした。
font-weightのboldは700に相当するようです。

https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

[mcdmaster]

再現しました！けっこう、どんなブラウザでも再現しますね。
私のローカル環境の assets/locales/en.json 古かったため、気づけませんでした。
失礼いたしました。

ちょうど今、PR #3778 でサイドメニューをイジっています。
タイミングが合うので、こちらもそこに含めてしまおうかと思います。
もしもご都合が悪いようでしたら、お知らせください

[munierujp]

@mcdmaster 自分は特にこの件に関して作業はしていないので、解決していただけるのであればお願いします:bow:

[hijikiman]

@mcdmaster
これ私が取り組んでもいいでしょうか？まだ反映されてないみたいだったので...

[mcdmaster]

@hijikiman
ありがとうございます！たいへん助かります。旧 components/SideNavigation.vue あたりの DIFF を #3778 からご覧いただけると、私の修正箇所を見つけられます。ご参考となるかどうかのご判断は、お任せします。
なお、現在のファイルパスは components/_shared/SideNavigation.vue になるでしょうか。

私の分のオリジナルイシュー #3778 は既にクローズされていますけれども、本家（？）オリジナルが残っていたのでラッキーでした。
#3778 はいわゆる「全部乗せ」ふうで総花的な対応がゴールになってしまっていたため、 @kaizumaki さんとも相談のうえ、現在はクローズされています。
お含みおきをいただけますと幸いです

[hijikiman]

ありがとうございます。該当PRも貼っていただき、大変助かります！
早速、取り組みたいと思います。