From f9ae62a4597d7d54b55ca6e9878de3a9be5e900a Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sun, 8 Mar 2026 16:19:07 +0100
Subject: [PATCH] Refactor button-container styles for improved layout and
 responsiveness

---
 .../Web/mediaBarEnhanced.css                   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
index fe3043e..a35f80d 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
@@ -768,21 +768,22 @@
   .button-container {
     top: calc(50% + 25vh);
     left: 50%;
-    transform: translateX(-50%) scale(0.95);
-    width: 95vw;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 98vw;
     flex-wrap: nowrap;
     justify-content: center;
-    gap: 10px;
+    gap: 15px;
   }
 
   .button-container button {
     margin: 0 !important;
     min-width: 0 !important;
-    flex-shrink: 1;
   }
 
-  .button-container .detailButton {
-    min-width: 0 !important;
+  .button-container .detail-button,
+  .button-container .favorite-button {
+    flex-shrink: 0;
   }
 
   .logo {
@@ -812,13 +813,12 @@
 
   @media (max-width: 400px) {
     .button-container {
-      gap: 5px;
+      gap: 10px;
     }
 
     .play-button,
     .trailer-button {
-      padding: 8px 10px;
-      font-size: 14px;
+      padding: 8px 14px;
     }
   }
 }