From bc5aef846b2b3e446541b7db9afed47ea84694bd Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 13 Jan 2026 15:28:54 +0900
Subject: enhance(frontend):
 画面幅が広いときはメディアを横並びで表示できるようにするオプションを追加
 (#16946)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* Update Changelog

* Update CHANGELOG.md
---
 packages/frontend/src/components/MkMediaVideo.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src/components/MkMediaVideo.vue')

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index aac52bfa26..4d06e42c05 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/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>
-- 
cgit v1.2.3-freya