From c5ac02d133b54e163dc374583ffdf06e1727ed4d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 16 Jul 2024 01:18:33 +0200
Subject: [PATCH] [Media UI] Misc style improvements.

---
 .../src/components/panels/Media/Item.vue      |  2 ++
 .../components/panels/Media/Providers/Nav.vue |  3 +++
 .../Media/Providers/YouTube/header.scss       | 21 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
index d47f4da4c4..440ca47dad 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
@@ -97,6 +97,8 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-height: 23.5em;
+  height: 100%;
   cursor: initial !important;
   margin-bottom: 5px;
   border: 1px solid transparent;
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Nav.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Nav.vue
index b475082f91..96f760e13d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Nav.vue
@@ -48,6 +48,9 @@ export default {
 @import "../style.scss";
 
 .nav {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+
   .path .token .icon {
     margin-right: 0.5em;
   }
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/header.scss b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/header.scss
index c8d8dd8070..b564d9af74 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/header.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/header.scss
@@ -1,7 +1,19 @@
-$banner-height: 100px;
+$banner-height: var(--banner-height);
 $info-bg: rgba(0, 0, 0, 0.5);
 $info-fg: rgba(255, 255, 255, 0.9);
 
+@include until($tablet) {
+  .playlist-container, .channel {
+    --banner-height: 5em;
+  }
+}
+
+@include from($tablet) {
+  .playlist-container, .channel {
+    --banner-height: 100px;
+  }
+}
+
 .header {
   border-bottom: $default-border-2;
   margin-bottom: 0.5em;
@@ -86,7 +98,14 @@ $info-fg: rgba(255, 255, 255, 0.9);
     }
   }
 
+  .title-container {
+    max-height: var(--banner-height);
+    overflow-y: hidden;
+  }
+
   .title {
+    height: 100%;
+    align-content: center;
     color: $default-fg-2;
     font-size: 1.7em;
     font-weight: bold;