[UXP-234] fix playlist overlap

Author: FrancescoMolinaro

src/app/shared/media-player/media-player.component.scss

@@ -2,8 +2,8 @@
 @import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
 
 .media-container {
-  max-height: 480px;
-  margin-bottom: 140px;
+  //additional 32px to give some space under content bar
+  margin-bottom: calc(var(--ds-video-selection-bar-height) + 32px);
 }
 
 

src/app/shared/media-player/media-selection-bar/media-selection-bar.component.scss

@@ -7,7 +7,7 @@
   overflow-y: hidden;
   white-space: nowrap;
   padding: 0;
-  height: calc(107px + 0.25rem);
+  height: var(--ds-video-selection-bar-height);
 
   &-item {
     display: inline-block;

src/styles/_custom_variables.scss

@@ -151,6 +151,8 @@
   --ds-cris-layout-navbar-tab-color-active: #006666;
   --ds-cris-layout-navbar-tab-color-hover : #{theme-color('light')};
 
+  --ds-video-selection-bar-height: calc(107px + 0.25rem);
+
   --ds-carousel-controls-color: #{$gray-600};
   --ds-carousel-caption-color: #{$gray-800};
   --ds-carousel-caption-background: rgba(255, 255, 255, .6);