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

[nullnyat]

What

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

Why

見た目があまり良くない

Additional info (optional)

Checklist

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

[syuilo]

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

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

Additional details and impacted files

@@             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              

☔ View full report in Codecov by Sentry.
📢 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]

👍🏻