diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 9239d44298..f7fcb1d012 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -102,9 +102,9 @@ defineExpose({
 	}
 	&.showLess {
 		width: 100%;
-		margin-top: 1em;
 		position: sticky;
-		bottom: var(--stickyBottom);
+		bottom: calc(var(--stickyBottom) - 1em);
+		padding: 20px;
 
 		> span {
 			display: inline-block;
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index f171417f7b..2ef339a8fe 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/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;
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index c7652f476c..c1d34ab82d 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -1,21 +1,22 @@
 <template>
-	<div class="xubzgfgb" :class="{ cover }" :title="title">
-		<canvas
-			v-if="!loaded"
-			ref="canvas"
-			:width="size"
-			:height="size"
-			:title="title"
-		/>
-		<img
-			v-if="src"
-			:src="src"
-			:title="title"
-			:type="type"
-			:alt="alt"
-			@load="onLoad"
-		/>
-	</div>
+	<canvas
+		v-if="!loaded"
+		ref="canvas"
+		:width="size"
+		:height="size"
+		:title="title"
+	/>
+	<img
+		v-if="src"
+		:src="src"
+		:title="title"
+		:type="type"
+		:alt="alt"
+		:class="{ cover }"
+		:style="{ 'object-fit': cover ? 'cover' : null }"
+		loading="lazy"
+		@load="onLoad"
+	/>
 </template>
 
 <script lang="ts" setup>
@@ -64,31 +65,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.xubzgfgb {
-	position: relative;
+canvas,
+img {
+	display: block;
 	width: 100%;
 	height: 100%;
+}
 
-	> canvas,
-	> img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
+canvas {
+	position: absolute;
+	inset: 0;
+	object-fit: cover;
+}
 
-	> canvas {
-		position: absolute;
-		object-fit: cover;
-	}
-
-	> img {
-		object-fit: contain;
-	}
-
-	&.cover {
-		> img {
-			object-fit: cover;
-		}
-	}
+img {
+	object-fit: contain;
 }
 </style>
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 37fe5174b9..74f45c69c7 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -1,7 +1,6 @@
 <template>
 	<button v-if="hide" class="qjewsnkg" @click="hide = false">
 		<ImgWithBlurhash
-			class="bg"
 			:hash="image.blurhash"
 			:title="image.comment"
 			:alt="image.comment"
@@ -82,20 +81,17 @@ watch(
 	all: unset;
 	position: relative;
 
-	> .bg {
-		filter: brightness(0.5);
-	}
-
 	> .text {
-		position: absolute;
-		left: 0;
-		top: 0;
+		position: relative;
 		width: 100%;
 		height: 100%;
 		z-index: 1;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		padding: 30px;
+		box-sizing: border-box;
+		background: rgba(0,0,0,0.5);
 
 		> .wrapper {
 			display: table-cell;
@@ -112,7 +108,6 @@ watch(
 
 .gqnyydlz {
 	position: relative;
-	//box-shadow: 0 0 0 1px var(--divider) inset;
 	background: var(--bg);
 
 	> .hide {
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 44b05e269d..901aceeff5 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -1,20 +1,18 @@
 <template>
-	<div class="hoawjimk">
+	<div class="hoawjimk files">
 		<XBanner
 			v-for="media in mediaList.filter((media) => !previewable(media))"
 			:key="media.id"
 			:media="media"
 		/>
 		<div
-			v-if="mediaList.filter((media) => previewable(media)).length > 0"
-			class="gird-container"
+			v-if="previewableCount > 0"
+			class="grid-container"
+			:data-count="previewableCount < 5 ? previewableCount : null"
 			:class="{ dmWidth: inDm }"
 		>
 			<div
 				ref="gallery"
-				:data-count="
-					mediaList.filter((media) => previewable(media)).length
-				"
 				@click.stop
 			>
 				<template
@@ -191,6 +189,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		FILE_TYPE_BROWSERSAFE.includes(file.type)
 	);
 };
+const previewableCount = props.mediaList.filter((media) => previewable(media)).length;
 </script>
 
 <style lang="scss" scoped>
@@ -200,7 +199,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		max-width: 40rem;
 	}
 
-	> .gird-container {
+	> .grid-container {
 		position: relative;
 		width: 100%;
 		margin-top: 4px;
@@ -208,71 +207,74 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 		pointer-events: none;
 
-		&:before {
-			content: "";
-			display: block;
+		&[data-count] {
 			padding-top: 56.25%; // 16:9;
+			> div {
+				position: absolute;
+				inset: 0;
+			}
+		}
+
+		&[data-count="1"] > div {
+			grid-template-rows: 1fr;
+		}
+
+		&[data-count="2"] > div {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr;
+		}
+
+		&[data-count="3"] > div {
+			grid-template-columns: 1fr 0.5fr;
+			grid-template-rows: 1fr 1fr;
+
+			> *:nth-child(1) {
+				grid-row: 1 / 3;
+			}
+
+			> *:nth-child(3) {
+				grid-column: 2 / 3;
+				grid-row: 2 / 3;
+			}
+		}
+
+		&[data-count="4"] > div {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr;
+		}
+
+		&:not([data-count]) > div > div {
+			max-height: 300px;
 		}
 
 		> div {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
 			display: grid;
 			grid-gap: 8px;
 
-			> * {
+			> div, > button {
 				overflow: hidden;
 				border-radius: 6px;
 				pointer-events: all;
+				min-height: 50px;
 			}
 
-			&[data-count="1"] {
-				grid-template-rows: 1fr;
-			}
 
-			&[data-count="2"] {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr;
-			}
-
-			&[data-count="3"] {
-				grid-template-columns: 1fr 0.5fr;
-				grid-template-rows: 1fr 1fr;
-
-				> *:nth-child(1) {
-					grid-row: 1 / 3;
-				}
-
-				> *:nth-child(3) {
-					grid-column: 2 / 3;
-					grid-row: 2 / 3;
-				}
-			}
-
-			&[data-count="4"] {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr 1fr;
-			}
-
-			> *:nth-child(1) {
+			> :nth-child(1) {
 				grid-column: 1 / 2;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(2) {
+			> :nth-child(2) {
 				grid-column: 2 / 3;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(3) {
+			> :nth-child(3) {
 				grid-column: 1 / 2;
 				grid-row: 2 / 3;
 			}
 
-			> *:nth-child(4) {
+			> :nth-child(4) {
 				grid-column: 2 / 3;
 				grid-row: 2 / 3;
 			}
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 7440fb2cb5..29d85d9a3d 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -12,8 +12,9 @@
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
-	<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+	<div v-else class="video" :class="{ mini }">
 		<VuePlyr
+			ref="plyr"
 			:options="{
 				controls: [
 					'play-large',
@@ -40,12 +41,18 @@
 				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
-		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import VuePlyr from "vue-plyr";
 import type * as misskey from "calckey-js";
 import { defaultStore } from "@/store";
@@ -56,31 +63,47 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
+const plyr = ref();
+const mini = ref(false);
+
 const hide = ref(
 	defaultStore.state.nsfw === "force"
 		? true
 		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
 );
+
+onMounted(() => {
+	mini.value = plyr.value.player.media.scrollWidth < 300;
+	if (mini.value) {
+		plyr.value.player.on('play', () => {
+			plyr.value.player.fullscreen.enter();
+		});
+	}
+})
 </script>
 
 <style lang="scss" scoped>
-.kkjnbbplepmiyuadieoenjgutgcmtsvu {
+.video {
 	position: relative;
 	--plyr-color-main: var(--accent);
 
-	> i {
+	> .hide {
 		display: block;
 		position: absolute;
 		border-radius: 6px;
-		background-color: var(--fg);
-		color: var(--accentLighten);
-		font-size: 14px;
-		opacity: 0.5;
-		padding: 3px 6px;
+		background-color: var(--accentedBg);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
+		color: var(--accent);
+		font-size: 0.8em;
+		padding: 6px 8px;
 		text-align: center;
-		cursor: pointer;
 		top: 12px;
 		right: 12px;
+
+		> i {
+			display: block;
+		}
 	}
 
 	> video {
@@ -95,6 +118,18 @@ const hide = ref(
 		width: 100%;
 		height: 100%;
 	}
+
+	&.mini {
+		:deep(.plyr:not(:fullscreen)) {
+			min-width: unset !important;
+			.plyr__control--overlaid,
+			.plyr__progress__container,
+			.plyr__volume,
+			[data-plyr="fullscreen"] {
+				display: none;
+			}
+		}
+	}
 }
 
 .icozogqfvdetwohsdglrbswgrejoxbdj {
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 8e3576dd50..af3e1c4eea 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -700,6 +700,7 @@ defineExpose({
 	}
 
 	> .article {
+		position: relative;
 		overflow: clip;
 		padding: 4px 32px 10px;
 		cursor: pointer;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index f98dfcb593..f4637948d1 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -435,6 +435,7 @@ function noteClick(e) {
 		}
 
 		> .body {
+			position: relative;
 			flex: 1;
 			min-width: 0;
 			margin: 0 -200px;
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 3ec7086881..e2d9b7d499 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/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;
@@ -58,9 +60,10 @@ defineExpose({
 }
 .showLess {
 	width: 100%;
-	margin-top: 1em;
 	position: sticky;
-	bottom: var(--stickyBottom);
+	bottom: calc(var(--stickyBottom) - 1em);
+	padding: 20px;
+	z-index: 5;
 
 	> span {
 		display: inline-block;
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 936e5e8987..ea09770548 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -34,6 +34,7 @@
 			:class="{
 				collapsed,
 				isLong,
+				manyImages: note.files.length > 4,
 				showContent: note.cw && !showContent,
 				disableAnim: disableMfm,
 			}"
@@ -96,9 +97,7 @@
 					:to="`/notes/${note.renoteId}`"
 					>{{ i18n.ts.quoteAttached }}: ...</MkA
 				>
-				<div v-if="note.files.length > 0" class="files">
-					<XMediaList :media-list="note.files" />
-				</div>
+				<XMediaList v-if="note.files.length > 0" :media-list="note.files" />
 				<XPoll v-if="note.poll" :note="note" class="poll" />
 				<template v-if="detailed">
 					<MkUrlPreview
@@ -152,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>
 
@@ -188,11 +188,14 @@ const emit = defineEmits<{
 
 const cwButton = ref<HTMLElement>();
 const showMoreButton = ref<HTMLElement>();
-const isLong =
-	!props.detailedView &&
-	props.note.cw == null &&
-	props.note.text != null &&
-	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
+const isLong = !props.detailedView
+	&& ( props.note.cw == null
+		&& (props.note.text != null
+			&& (props.note.text.split("\n").length > 9 || props.note.text.length > 500)
+		)
+		|| props.note.files.length > 4
+	);
+
 const collapsed = $ref(props.note.cw == null && isLong);
 
 const urls = props.note.text
@@ -285,7 +288,7 @@ function focusFooter(ev) {
 					background: var(--buttonHoverBg);
 				}
 			}
-			> .files {
+			> :deep(.files) {
 				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 			}
@@ -332,27 +335,32 @@ function focusFooter(ev) {
 				-webkit-user-select: none;
 				-moz-user-select: none;
 			}
-			&.collapsed > .body {
+		}
+		&.collapsed {
+			&.manyImages {
+				max-height: calc(9em + 200px);
+			}
+			> .body {
 				box-sizing: border-box;
 			}
-			&.showContent {
-				> .body {
-					min-height: 2em;
-					max-height: 5em;
-					filter: blur(4px);
-					:deep(span) {
-						animation: none !important;
-						transform: none !important;
-					}
-					:deep(img) {
-						filter: blur(12px);
-					}
+		}
+		&.showContent {
+			> .body {
+				min-height: 2em;
+				max-height: 5em;
+				filter: blur(4px);
+				:deep(span) {
+					animation: none !important;
+					transform: none !important;
 				}
-				:deep(.fade) {
-					inset: 0;
-					top: 40px;
+				:deep(img) {
+					filter: blur(12px);
 				}
 			}
+			:deep(.fade) {
+				inset: 0;
+				top: 40px;
+			}
 		}
 
 		&.disableAnim :deep(span) {
@@ -364,5 +372,26 @@ 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));
+			transition: background .2s;
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 73c3bab340..053f3d3e72 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/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;
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 5b1753560a..77bab8f64f 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/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;
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 272b81ba18..0fde3aa024 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/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;
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index ef160f8c6d..f8f794221d 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/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;