Refactor button-container styles for improved layout and responsiveness

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -766,41 +766,23 @@
   }
 
   .button-container {
-    top: calc(50% + 24vh) !important;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
-    width: 100vw !important;
-    flex-wrap: nowrap !important;
-    justify-content: center !important;
-    gap: 12px !important;
-    padding: 0 10px !important;
-    box-sizing: border-box !important;
+    top: calc(50% + 25vh);
+    left: 50%;
+    transform: translateX(-50%) scale(0.95);
+    width: 95vw;
+    flex-wrap: nowrap;
+    justify-content: center;
+    gap: 10px;
   }
 
   .button-container button {
-    min-width: unset !important;
     margin: 0 !important;
-    flex-shrink: 1 !important;
-    height: 45px !important;
-    max-width: fit-content !important;
+    min-width: 0 !important;
+    flex-shrink: 1;
   }
 
-  .button-container .play-button,
-  .button-container .trailer-button {
-    padding: 8px 14px !important;
-    border-radius: 8px !important;
-    font-size: 16px !important;
-  }
-
-  .button-container .detail-button,
-  .button-container .favorite-button {
-    width: 45px !important;
-    padding: 0 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    flex-shrink: 0 !important;
-    border-radius: 50% !important;
+  .button-container .detailButton {
+    min-width: 0 !important;
   }
 
   .logo {
@@ -830,23 +812,13 @@
 
   @media (max-width: 400px) {
     .button-container {
-      gap: 6px !important;
-      top: calc(50% + 26.5vh) !important;
+      gap: 5px;
     }
 
-    .button-container .play-button,
-    .button-container .trailer-button {
-      padding: 6px 10px !important;
-      font-size: 14px !important;
-    }
-
-    .button-container button {
-      height: 40px !important;
-    }
-
-    .button-container .detail-button,
-    .button-container .favorite-button {
-      width: 40px !important;
+    .play-button,
+    .trailer-button {
+      padding: 8px 10px;
+      font-size: 14px;
     }
   }
 }