fix(frontend): アイコンデコレーションが見切れる問題を修正 (#12239)

* fix(frontend): アイコンデコレーションがナビゲーションバーでクリップされないように

* Revert "fix(frontend): アイコンデコレーションがナビゲーションバーでクリップされないように"

This reverts commit db246b1.

* fix: tweak padding of account in navbar

* fix: set minimum height of note preview

* fix: リアクション一覧でアイコンデコレーションが見切れないように

* Update CHANGELOG.md

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

CHANGELOG.md

@@ -18,7 +18,7 @@
 -
 
 ### Client
--
+- Fix: アイコンデコレーションが複数の場所で見切れている問題を修正
 
 ### Server
 - Fix: トークンのないプラグインをアンインストールするときにエラーが出ないように

packages/frontend/src/components/MkPostForm.vue

@@ -1072,6 +1072,7 @@ defineExpose({
 
 .preview {
 	padding: 16px 20px 0 20px;
+	min-height: 75px;
 	max-height: 150px;
 	overflow: auto;
 }

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -73,7 +73,6 @@ function getReactionName(reaction: string): string {
 }
 
 .users {
-	contain: content;
 	flex: 1;
 	min-width: 0;
 	margin: -4px 14px 0 10px;
@@ -85,7 +84,7 @@ function getReactionName(reaction: string): string {
 	line-height: 24px;
 	padding-top: 4px;
 	white-space: nowrap;
-	overflow: hidden;
+	overflow: visible;
 	text-overflow: ellipsis;
 }
 

packages/frontend/src/ui/_common_/navbar.vue

@@ -176,7 +176,7 @@ function more(ev: MouseEvent) {
 	.bottom {
 		position: sticky;
 		bottom: 0;
-		padding: 20px 0;
+		padding-top: 20px;
 		background: var(--X14);
 		-webkit-backdrop-filter: var(--blur, blur(8px));
 		backdrop-filter: var(--blur, blur(8px));
@@ -228,11 +228,10 @@ function more(ev: MouseEvent) {
 		position: relative;
 		display: flex;
 		align-items: center;
-		padding-left: 30px;
+		padding: 20px 0 20px 30px;
 		width: 100%;
 		text-align: left;
 		box-sizing: border-box;
-		margin-top: 16px;
 		overflow: clip;
 	}
 
@@ -363,7 +362,7 @@ function more(ev: MouseEvent) {
 	.bottom {
 		position: sticky;
 		bottom: 0;
-		padding: 20px 0;
+		padding-top: 20px;
 		background: var(--X14);
 		-webkit-backdrop-filter: var(--blur, blur(8px));
 		backdrop-filter: var(--blur, blur(8px));
@@ -374,7 +373,6 @@ function more(ev: MouseEvent) {
 		position: relative;
 		width: 100%;
 		height: 52px;
-		margin-bottom: 16px;
 		text-align: center;
 
 		&:before {
@@ -411,6 +409,7 @@ function more(ev: MouseEvent) {
 	.account {
 		display: block;
 		text-align: center;
+		padding: 20px 0;
 		width: 100%;
 		overflow: clip;
 	}