From 7f96ec6229407a71acfb38fc5e154d10edf7a064 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Sun, 8 Feb 2026 18:46:02 +0100
Subject: [PATCH] fix: align preview app media controls for mobile screens

---
 packages/web-app-preview/src/components/MediaControls.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 6cc98effa9..e5954ea93d 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -3,7 +3,9 @@
     class="preview-details"
     :class="[{ 'lightbox opacity-90 z-1000': isFullScreenModeActivated }]"
   >
-    <div class="bg-role-surface-container p-2 w-lg flex items-center justify-around rounded-sm">
+    <div
+      class="bg-role-surface-container p-2 w-lg max-w-[80vw] flex flex-wrap items-center justify-around rounded-sm"
+    >
       <oc-button
         v-oc-tooltip="previousDescription"
         class="preview-controls-previous raw-hover-surface"