fix small window sizes

packages/client/src/components/MkNoteDetailed.vue

@@ -648,13 +648,9 @@ onUnmounted(() => {
 	&.max-width_500px {
 		font-size: 0.9em;
 	}
-
-	@media (max-width: 500px) {
-		margin-inline: -24px;
-	}
-
+	
 	&.max-width_450px {
-
+		
 		> .reply-to-more:first-child {
 			padding-top: 14px;
 		}
@@ -670,10 +666,6 @@ onUnmounted(() => {
 		}
 	}
 
-	@media (max-width: 400px) {
-		margin-inline: -12px;
-	}
-
 	&.max-width_350px {
 		> .article {
 			> .main {

packages/client/src/components/MkNoteSub.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
+<div v-size="{ max: [450, 500] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="router.push(notePage(note))">
 		<div class="avatar-container">
@@ -269,7 +269,25 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
+	&.max-width_500px {
+		:not(.reply) > & {
+			.reply {
+				--avatarSize: 24px;
+				--indent: calc(var(--avatarSize) - 4px);
+			}
+			&.firstColumn {
+				> .main, > .line, > .children:not(.single) > .line {
+					--avatarSize: 35px;
+					--indent: 35px;
+				}
+				> .children:not(.single) {
+					padding-left: 28px !important;
+				}
+			}
+		}
+	}
 	&.max-width_450px {
+		padding: 14px 16px;
 		&.reply-to, &.reply-to-more {
 			padding: 14px 16px;
 			padding-top: 14px !important;
@@ -280,23 +298,5 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-right: 10px;
 		}
 	}
-	@media (max-width: 450px) {
-		padding: 14px 16px;
-	}
-	@media (max-width: 500px) {
-		&.reply {
-			--avatarSize: 24px;
-			--indent: calc(var(--avatarSize) - 4px);
-		}
-		&.firstColumn {
-			> .main, > .line, > .children:not(.single) > .line {
-				--avatarSize: 35px;
-				--indent: 35px;
-			}
-			> .children:not(.single) {
-				padding-left: 28px !important;
-			}
-		}
-	}
 }
 </style>

packages/client/src/pages/note.vue

@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div class="fcuexfpr">
+		<div class="fcuexfpr" v-size="{ max: [500, 350] }">
 			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">
 					<div v-if="showNext" class="_gap">
@@ -202,5 +202,11 @@ definePageMetadata(computed(() => note ? {
 			}
 		}
 	}
+	&.max-width_500px > .note {
+		margin-inline: -24px;
+	}
+	&.max-width_350px > .note {
+		margin-inline: -12px;
+	}
 }
 </style>