enhance(frontend): WidgetInstanceInfo.vue と WidgetProfile.vue のスタイル調整

[nullnyat]

What

ウィジェットのプロフィールとサーバー情報のドロップシャドウが見切れているのが改善される

Why

見た目があまり良くない

Additional info (optional)

Checklist

• [x] Read the contribution guide
• [x] Test working in a local environment
• [ ] (If needed) Add story of storybook
• [ ] (If needed) Update CHANGELOG.md
• [ ] (If possible) Add tests

[syuilo]

afterのスクショがあると助かるかも

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 77.84%. Comparing base (379ce01) to head (0758aa9). Report is 4 commits behind head on develop.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #14028 +/- ## =========================================== + Coverage 77.79% 77.84% +0.05% =========================================== Files 184 185 +1 Lines 25536 25601 +65 Branches 487 487 =========================================== + Hits 19865 19930 +65 Misses 5664 5664 Partials 7 7 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[nullnyat]

びふぉー

あふたー

です。

[syuilo]

overflow無くすと名前が長い時にはみ出すようにならないかしら？

[nullnyat]

なんかそこは文字ごとはみ出るからいいかなって気持ちになってるかも、、？

[nullnyat]

枠からシャドーがはみ出るってことはないかも

[kakkokari-gtyih]

overflow: clip; はそのままにしといて、

.body {
    text-overflow: ellipsis;
    overflow: clip;
    margin-left: -5px;
    padding-left: 5px;
    width: calc(100% + 5px);
}

とかにするといいかも

[nullnyat]

確かに、そっちの方が良さそう

[nullnyat]

よくなってきた☺️

[nullnyat]

色、いい案が出なかったのでそのままになってます。

どうでしょう。。。

[syuilo]

drop shadowではなくtext shadowに変更した理由ってあるかしら

[syuilo]

text-shadowだと文字通りテキストにしか適用されないからカスタム絵文字が浮きそう

[nullnyat]

drop shadowはデザイン的にビミョいって思っただけなので、特に特別な理由があってというわけではないですね。

カスタム絵文字のこと考えてませんでした。。。

ここが薄すぎるのがなぁと思っていただけなので、drop shadowに変更します🙏

[kakkokari-gtyih]

drop shadowを重ね掛けすれば薄さ改善できるはず

[nullnyat]

ふむ。。。

アクセントカラーをつけて見た。どうだろう。。。(色がうるさすぎる可能性がありそうって思ってる)

[kakkokari-gtyih]

普通に黒シャドウを複数回かけるのでよさそう たとえば

filter: drop-shadow(0 0 3px #000) drop-shadow(0px 0px 6px rgba(0, 0, 0, .5));

↓

[nullnyat]

こんな感じになりました。

[nullnyat]

ユーザーページも見切れてしまっているのに気づいてしまったのでひっそり直しました。

ビフォーアフターです。

[syuilo]

👍🏻