enhance(frontend): 画面幅が広いときはメディアを横並びで表示できるようにするオプションを追加 (#16946)

* enhance(frontend): 画面幅が広いときはメディアを横並びで表示できるようにするオプションを追加

* Update Changelog

* Update CHANGELOG.md

packages/frontend/src/components/MkMediaVideo.vue

@@ -705,7 +705,7 @@ onDeactivated(() => {
 	.controlButton {
 		padding: 6px;
 		border-radius: calc(var(--MI-radius) / 2);
-		transition: background-color .2s ease-in-out;
+		transition: background-color .15s ease;
 		font-size: 1.05rem;
 
 		&:hover {
@@ -760,4 +760,21 @@ onDeactivated(() => {
 		}
 	}
 }
+
+@container (max-width: 300px) {
+	.videoControls {
+		grid-template-areas:
+			"left . right"
+			"seekbar seekbar seekbar";
+		grid-template-columns: auto 1fr auto;
+	}
+
+	.controlsTime {
+		display: none;
+	}
+
+	.controlsVolume {
+		display: none;
+	}
+}
 </style>