From f6c971dec4c3c77ad1832c451f1bf828f8b34730 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 17 Aug 2026 17:23:08 +0200
Subject: [PATCH] fix: improve media controls layout stability

- Add minimum width to file counter to prevent button jumping
- Remove w-lg class to prevent layout issues with 10+ files

Fixes layout issues where navigation buttons would shift position
when navigating between files due to changing counter width, and
prevents line breaks when displaying many files.
---
 packages/web-app-preview/src/components/MediaControls.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 5d40d18c38c..9e209eddbae 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -4,9 +4,7 @@
     class="preview-details"
     :class="[{ 'lightbox opacity-90 z-1000': isFullScreenModeActivated }]"
   >
-    <oc-bubble-menu
-      class="w-lg max-w-[80vw] flex flex-wrap items-center justify-center gap-x-1 gap-y-1"
-    >
+    <oc-bubble-menu class="max-w-[80vw] flex flex-wrap items-center justify-center gap-x-1 gap-y-1">
       <div class="preview-controls-navigation flex w-full items-center justify-center sm:w-auto">
         <oc-button
           v-oc-tooltip="previousDescription"
@@ -18,7 +16,7 @@
           <oc-icon name="arrow-left-s" fill-type="line" />
         </oc-button>
         <p v-if="!isFolderLoading" class="preview-controls-action-count m-0 px-2 text-center">
-          <span aria-hidden="true" v-text="ariaHiddenFileCount" />
+          <span class="min-w-[60px] block" aria-hidden="true" v-text="ariaHiddenFileCount" />
           <span class="sr-only" v-text="screenreaderFileCount" />
         </p>
         <oc-button