Refactor button-container styles for improved layout and responsiveness

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;
     }
   }
 }