Apply suggestions

locales/en-US.yml

@@ -63,9 +63,9 @@ loadMore: "Load more"
 showMore: "Show more"
 newer: "newer"
 older: "older"
-showLess: "Close"
 expandAllCws: "Show content for all replies"
 collapseAllCws: "Hide content for all replies"
+showLess: "Show less"
 youGotNewFollower: "followed you"
 receiveFollowRequest: "Follow request received"
 followRequestAccepted: "Follow request accepted"
@@ -1127,6 +1127,7 @@ removeQuote: "Remove quote"
 removeRecipient: "Remove recipient"
 removeMember: "Remove member"
 verifiedLink: "Verified link"
+noteHidden: "This note is hidden"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing
@@ -1623,7 +1624,7 @@ _widgets:
   meiliIndexCount: "Indexed posts"
 
 _cw:
-  hide: "Hide"
+  hide: "Hide content"
   show: "Show content"
   chars: "{count} characters"
   files: "{count} file(s)"

packages/client/src/components/MkCwButton.vue

@@ -114,7 +114,7 @@ defineExpose({
 			padding: 0.4em 3em;
 			font-size: 0.8em;
 			border-radius: 999px;
-			box-shadow: 0 0 7px 7px var(--bg);
+			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
 	}
 }

packages/client/src/components/MkShowMoreButton.vue

@@ -71,7 +71,7 @@ defineExpose({
 		padding: 0.4em 3em;
 		font-size: 0.8em;
 		border-radius: 999px;
-		box-shadow: 0 0 7px 7px var(--bg);
+		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 	}
 }
 </style>

packages/client/src/components/MkSubNoteContent.vue

@@ -59,6 +59,7 @@
 				v-model="collapsed"
 				v-on:keydown="focusFooter"
 			></XShowMoreButton>
+			<span v-if="note.cw && !showContent" class="hiddenNote">{{ i18n.ts.noteHidden }}</span>
 			<XCwButton
 				ref="cwButton"
 				v-if="note.cw && !showContent"
@@ -314,6 +315,13 @@ function focusFooter(ev) {
 .wrmlmaau {
 	.content {
 		overflow-wrap: break-word;
+		> .hiddenNote {
+			display: block;
+			padding: 0.5em 0 0.5em;
+			font-weight: 700;
+			font-size: 1.1em;
+			text-align: center;
+		}
 		> .body {
 			transition: filter 0.1s;
 			> .rp {
@@ -363,6 +371,7 @@ function focusFooter(ev) {
 		&.collapsed,
 		&.showContent {
 			position: relative;
+			min-height: calc(1em + 100px);
 			max-height: calc(15em + 100px);
 			> .body {
 				max-height: inherit;
@@ -397,7 +406,7 @@ function focusFooter(ev) {
 			}
 			:deep(.fade) {
 				inset: 0;
-				top: 90px;
+				top: 0;
 			}
 		}