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;