Add bottom fade to show less & hide buttons

packages/client/src/components/MkCwButton.vue

@@ -104,7 +104,8 @@ defineExpose({
 		width: 100%;
 		margin-top: 1em;
 		position: sticky;
-		bottom: var(--stickyBottom);
+		bottom: calc(var(--stickyBottom) - 1em);
+		padding: 20px;
 
 		> span {
 			display: inline-block;

packages/client/src/components/MkGalleryPostPreview.vue

@@ -59,6 +59,7 @@ const props = defineProps<{
 		transition: all 0.5s ease;
 
 		> .img {
+			position: relative;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;

packages/client/src/components/MkShowMoreButton.vue

@@ -41,6 +41,8 @@ defineExpose({
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	padding: 20px;
+	margin-bottom: -10px;
 	z-index: 5;
 	> span {
 		display: inline-block;
@@ -60,7 +62,9 @@ defineExpose({
 	width: 100%;
 	margin-top: 1em;
 	position: sticky;
-	bottom: var(--stickyBottom);
+	bottom: calc(var(--stickyBottom) - 1em);
+	padding: 20px;
+	z-index: 5;
 
 	> span {
 		display: inline-block;

packages/client/src/components/MkSubNoteContent.vue

@@ -151,6 +151,7 @@
 				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
 			</template>
 		</MkButton>
+		<div v-if="(isLong && !collapsed) || (props.note.cw && showContent)" class="fade"></div>
 	</div>
 </template>
 
@@ -371,5 +372,25 @@ function focusFooter(ev) {
 		margin-left: 0;
 		margin-right: 0.4rem;
 	}
+	> .fade {
+		position: absolute;
+		inset: 0;
+		bottom: -400px;
+		display: flex;
+		align-items: flex-end;
+		z-index: 4;
+		pointer-events: none;
+		&::before {
+			content: "";
+			display: block;
+			height: 100px;
+			position: sticky;
+			bottom: 0;
+			width: 100%;
+			background: var(--panel);
+			mask: linear-gradient(to top, var(--gradient));
+			-webkit-mask: linear-gradient(to top, var(--gradient));
+		}
+	}
 }
 </style>

packages/client/src/pages/admin/emoji-edit-dialog.vue

@@ -114,6 +114,7 @@ async function del() {
 <style lang="scss" scoped>
 .yigymqpb {
 	> .img {
+		position: relative;
 		display: block;
 		height: 64px;
 		margin: 0 auto;

packages/client/src/pages/user/index.photos.vue

@@ -98,6 +98,7 @@ onMounted(() => {
 		grid-gap: 6px;
 
 		> .img {
+			position: relative;
 			height: 128px;
 			border-radius: 6px;
 			overflow: clip;

packages/client/src/ui/_common_/upload.vue

@@ -102,6 +102,7 @@ const zIndex = os.claimZIndex("high");
 	border-top: none;
 }
 .mk-uploader > ol > li > .img {
+	position: relative;
 	display: block;
 	background-size: cover;
 	background-position: center center;

packages/client/src/widgets/photos.vue

@@ -114,6 +114,7 @@ defineExpose<WidgetComponentExpose>({
 	}
 
 	.img {
+		position: relative;
 		border: solid 4px transparent;
 		border-radius: 8px;
 	}
@@ -126,6 +127,7 @@ defineExpose<WidgetComponentExpose>({
 	padding: 8px;
 
 	.img {
+		position: relative;
 		flex: 1 1 33%;
 		width: 33%;
 		height: 80px;