画面右端に余白が足りず数値を読み取れない

[Aspena2022]

内容

イントネーションと長さの調整画面で、一番右に来る語尾の数値が読めないです。例えば 5.51 のとき、 5.5までで次の数字が読めない。
mouse over時に表示されますが、微妙に右側に寄っているのが原因で画面外に見切れてしまいます。

そこで、画面右端に余白を作るために
\src\components\AudioDetail.vue の
.mora-table {　の中に
margin-right: 20px;
の定義を追加すれば、解決します。いかがでしょうか。

Pros 良くなる点

イントネーション調整がしやすくなる

Cons 悪くなる点

良い事だけだと思います

VOICEVOXのバージョン

0.12.3

OSの種類/ディストリ/バージョン

• Windows
• macOS
• Linux

Windows 10 64bit

その他

ちなみに0.11系でも同様の現象が見られました。

[Hiroshiba]

issue作成ありがとうございます！！

mora-tableだとこの文字列同士の間の空白も広がってしまうかもしれません。

最後の箇所以外の見た目が変わらなければ問題ないと思います、ぜひプルリクエストお待ちしています！！

それとは関係ないのですが、そもそもこのピッチを表示するチップがなんか右寄りですね･･･。

[Aspena2022]

１文字ごとではなく文節ごとの余白が広がりますね。句読点の後とか。
自分は20ピクセル程度の余白だとまったく違和感を感じなかったんですけど。
試しに60ピクセルに広げてみると不自然になりました。
mora-table以外の方法で直せるなら、そっちがいいかもです。
チップの位置を左に寄せたかったんですけど修正箇所がわからなくて。

[Hiroshiba]

できればmora-tableの余白は広げたくないというのはあります！
window幅を小さくして作業される方もいらっしゃるので、できる限り表示されている文字数を増やしたいという理由です。

mora-tableの親か、その親のクラスの右端marginを増やしたりすれば良い感じに解決するかも？とちょっと思いました！！

[Aspena2022]

accent-phrase-tableのmargin-right: 4px;を20に増やしてもチップが見切れてしまうのでお手上げです。

[Hiroshiba]

なるほどです･･･。overflowがhiddenになっているとか･･･？
https://qiita.com/annaaida/items/00a7906968dcb96feecf