tweak(MkNoteSub): 余白の微調整など

taiyme · May 7, 2024 · 8ecb4c1 · 8ecb4c1
1 parent c1b0a9e
commit 8ecb4c1
Showing 1 changed file with 45 additions and 5 deletions.
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
@@ -106,9 +106,9 @@ if (props.detail) {
 .avatar {
 	flex-shrink: 0;
 	display: block;
-	margin: 0 8px 0 0;
-	width: 38px;
-	height: 38px;
+	margin: 0 10px 0 0;
+	width: 48px;
+	height: 48px;
 	border-radius: 8px;
 }
 
@@ -143,16 +143,56 @@ if (props.detail) {
 	padding: 10px 0 0 16px;
 }
 
-@container (max-width: 450px) {
+@container (max-width: 580px) {
+	.root {
+		padding: 16px 26px;
+
+		&.children {
+			padding: 10px 0 0 14px;
+		}
+	}
+
+	.avatar {
+		width: 40px;
+		height: 40px;
+	}
+}
+
+@container (max-width: 500px) {
+	.root {
+		padding: 16px 22px;
+
+		&.children {
+			padding: 10px 0 0 12px;
+		}
+	}
+}
+
+@container (max-width: 480px) {
 	.root {
 		padding: 14px 16px;
 
 		&.children {
-			padding: 10px 0 0 8px;
+			padding: 8px 0 0 8px;
 		}
 	}
 }
 
+@container (max-width: 450px) {
+	.avatar {
+		margin: 0 8px 0 0;
+		width: 36px;
+		height: 36px;
+	}
+}
+
+@container (max-width: 300px) {
+	.avatar {
+		width: 34px;
+		height: 34px;
+	}
+}
+
 .muted {
 	text-align: center;
 	padding: 8px !important;