test2

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -766,18 +766,41 @@
   }
 
   .button-container {
-    top: calc(50% + 25vh);
-    left: 50%;
-    transform: translateX(-50%) scale(0.95);
-    width: 95vw;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 15px;
+    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;
   }
 
   .button-container button {
     min-width: unset !important;
     margin: 0 !important;
+    flex-shrink: 1 !important;
+    height: 45px !important;
+    max-width: fit-content !important;
+  }
+
+  .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;
   }
 
   .logo {
@@ -807,36 +830,23 @@
 
   @media (max-width: 400px) {
     .button-container {
-      gap: 10px;
+      gap: 6px !important;
+      top: calc(50% + 26.5vh) !important;
     }
 
-    .play-button,
-    .trailer-button {
-      padding: 8px 14px;
+    .button-container .play-button,
+    .button-container .trailer-button {
+      padding: 6px 10px !important;
+      font-size: 14px !important;
     }
 
-    .misc-info {
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 0px 10px;
+    .button-container button {
+      height: 40px !important;
     }
 
-    .runTime {
-      width: 100%;
-      justify-content: center;
-      margin-top: 0.5vh;
-    }
-
-    .misc-info .separator-icon:last-of-type {
-      display: none;
-    }
-
-    .genre {
-      top: calc(50% + 16vh);
-    }
-
-    .button-container {
-      top: calc(50% + 27vh);
+    .button-container .detail-button,
+    .button-container .favorite-button {
+      width: 40px !important;
     }
   }
 }