Fix: Removed temporary workarounds for sizing cards on phones

Theme/ElegantFin-theme-nightly.css

@@ -177,6 +177,10 @@ body {
     --clearLogoBottomSpace: 11em;
 }
 
+select {
+    text-overflow: ellipsis;
+}
+
 .layout-desktop > body:has(> audio[src]) {
     --primaryItemPageNegativeSpace: calc(14vh + 5em);
     --secondaryItemPageNegativeSpace: calc(60vh + 5em);
@@ -186,6 +190,7 @@ body {
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+    --itemColumnGap: 0.5em;
 }
 
 .layout-mobile > body {
@@ -928,19 +933,16 @@ body {
     }
 }
 
-.layout-mobile .card {
-    padding: 0;
-}
-
 .cardBox {
     margin-top: 0;
 }
 
 .card {
-    --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
+    --padding: 0.375em;
+    --effectiveWidth: calc(((100vw - (var(--padding) * 2)) - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
     width: var(--cardWidth) !important;
-    padding: 0.375em;
+    padding: var(--padding);
     transition: width 0.5s;
     box-sizing: content-box;
 }
@@ -953,13 +955,7 @@ body {
 }
 
 .layout-mobile .card {
-    --effectiveWidth: calc((91vw - (var(--sidePadding) * 2)));
+    --padding: 1px;
-    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount));
-}
-
-.layout-mobile .backdropCard,
-.layout-mobile .overflowBackdropCard {
-    --effectiveWidth: calc((94vw - (var(--sidePadding) * 2)));
 }
 
 /* this makes the card sizes smaller when phone is in landscape mode */
@@ -2618,7 +2614,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .MuiListItem-root > div {
     border: solid transparent var(--borderWidth);
     border-radius: 0.7em;
-    margin: 0.25 0.5em !important;
+    /* margin: 0.25em 0.5em !important; */
 }
 
 .Mui-selected {

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -74,7 +74,8 @@
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
-.pause-button, .volume-toggle {
+.pause-button,
+.volume-toggle {
     top: 1em !important;
 }
 
@@ -97,6 +98,49 @@
     transform: none;
 }
 
+@media only screen and (orientation: landscape) {
+    .button-container,
+    .dots-container,
+    .plot-container,
+    .genre,
+    .info-container {
+        top: unset;
+    }
+
+    .button-container {
+        bottom: 3em;
+    }
+
+    .dots-container {
+        bottom: 4.5em;
+    }
+
+    .plot-container {
+        height: 4em;
+        bottom: 7em;
+    }
+
+    .genre {
+        bottom: 12em;
+    }
+
+    .info-container {
+        bottom: 14em;
+    }
+
+    .logo-container {
+        top: 30%;
+        align-items: flex-end;
+        max-width: 35vw;
+    }
+
+    .gradient-overlay {
+        mask: none;
+        -webkit-mask: none;
+        background: linear-gradient(37deg, rgb(0 0 0 / 20%) 32%, rgb(29 29 29 / 7%) 47%, rgb(29 29 29 / 0%) 100%);
+    }
+}
+
 @media only screen and (max-width: 767px) and (orientation: portrait) {
     .button-container {
         bottom: 3em;