From 11aca321583056f9613bcc75f46286512f95dd4c Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sun, 8 Mar 2026 17:17:00 +0100
Subject: [PATCH] Enhance mobile layout by adjusting button container and
 adding styles for misc-info and genre

---
 .../Web/mediaBarEnhanced.css                  | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
index a35f80d..14b7e2d 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
@@ -814,12 +814,33 @@
   @media (max-width: 400px) {
     .button-container {
       gap: 10px;
+      /* top: calc(50% + 27vh); */
     }
 
     .play-button,
     .trailer-button {
       padding: 8px 14px;
     }
+
+    .misc-info {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0px 10px;
+    }
+
+    .runTime {
+      width: 100%;
+      justify-content: center;
+      margin-top: 0.5vh;
+    }
+
+    .misc-info .separator-icon:last-of-type {
+      display: none;
+    }
+
+    .genre {
+      top: calc(50% + 16vh);
+    }
   }
 }