Improve 'Now playing' screen for other resolutions as well (#1548)

* Rounded corners on other resolutions

* Vertically center text a bit more

* Feedback

* Feedback

Author: MarvinSchenkel

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -69,7 +69,6 @@
                 store.activePlayer?.powered != false &&
                 store.activePlayer?.current_media?.image_url
               "
-              style="max-width: 100%; width: auto"
               :src="
                 getMediaImageUrl(store.activePlayer.current_media.image_url)
               "
@@ -177,7 +176,7 @@
                 store.activePlayer?.powered != false &&
                 store.curQueueItem?.streamdetails
               "
-              style="margin: auto; padding-top: min(20px, 2vh)"
+              style="padding-top: min(20px, 2vh)"
             >
               <QualityDetailsBtn />
             </div>
@@ -379,7 +378,6 @@
           <div class="main-media-details-image main-media-details-image-alt">
             <v-img
               v-if="store.activePlayer?.current_media?.image_url"
-              style="max-width: 100%; width: auto"
               :src="
                 getMediaImageUrl(store.activePlayer.current_media.image_url)
               "
@@ -739,17 +737,17 @@ const titleFontSize = computed(() => {
     case "xs":
       return "1.2em";
     case "sm":
-      return "1.4em";
+      return "1.5em";
     case "md":
-      return "2em";
+      return "1.7em";
     case "lg":
-      return store.showQueueItems ? "1.5em" : "2.5em";
+      return store.showQueueItems ? "1.5em" : "2em";
     case "xl":
-      return store.showQueueItems ? "1.6em" : "3em";
+      return store.showQueueItems ? "1.6em" : "2.2em";
     case "xxl":
-      return store.showQueueItems ? "1.7em" : "3.2em";
+      return store.showQueueItems ? "1.7em" : "2.4em";
     default:
-      return "1.0em.";
+      return "1.0em";
   }
 });
 
@@ -758,17 +756,17 @@ const subTitleFontSize = computed(() => {
     case "xs":
       return "1.05em";
     case "sm":
-      return "1.15em";
+      return "1.25em";
     case "md":
-      return "1.7em";
+      return "1.35em";
     case "lg":
-      return store.showQueueItems ? "1.0em" : "1.6em";
+      return store.showQueueItems ? "1.1em" : "1.45em";
     case "xl":
-      return store.showQueueItems ? "1.2em" : "2em";
+      return store.showQueueItems ? "1.2em" : "1.6em";
     case "xxl":
-      return store.showQueueItems ? "1.2em" : "2em";
+      return store.showQueueItems ? "1.3em" : "1.8em";
     default:
-      return "1.0em.";
+      return "1.0em";
   }
 });
 
@@ -1476,10 +1474,13 @@ watchEffect(() => {
   padding-bottom: 5px;
 }
 
-.main-media-details {
+.main .main-media-details {
   flex: 50%;
   max-width: 100%;
   width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .main-queue-items {
@@ -1503,21 +1504,26 @@ watchEffect(() => {
   min-height: 50%;
   max-height: 80%;
   height: 60%;
-  align-content: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding-left: 20px;
   padding-right: 20px;
+  container-type: size;
 }
 .main-media-details-image .v-img {
-  width: auto;
+  width: min(100cqi, 100cqh);
+  height: min(100cqi, 100cqh);
+  flex: 0 0 auto;
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
 }
 
 .main-media-details-image-alt {
   height: 100% !important;
   max-height: 100% !important;
-  align-content: center;
-  padding: 0px !important;
+  padding: 10px !important;
 }
 
 .main-media-details-track-info {
@@ -1538,6 +1544,7 @@ watchEffect(() => {
   bottom: 0;
   position: unset !important;
   padding-bottom: 5%;
+  width: 100%;
 }
 
 .track-info {