fix: cvaa overlay responsive fixes (#81)

kaltura · Oct 16, 2017 · 207e880 · 207e880
1 parent 96c4a82
commit 207e880
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/cvaa-overlay/_cvaa-overlay.scss b/src/components/cvaa-overlay/_cvaa-overlay.scss
@@ -86,6 +86,11 @@
 
       &:first-child { margin-left: 0; }
       &:last-child { margin-right: 0; }
+
+      &.custom {
+        width: auto;
+        padding: 0 10px;
+      }
     }
     .button-save-cvaa,
     .custom-captions-applied {

diff --git a/src/components/cvaa-overlay/cvaa-overlay.js b/src/components/cvaa-overlay/cvaa-overlay.js
@@ -156,7 +156,7 @@ class CVAAOverlay extends BaseComponent {
           ) :
           (
             <div className={style.customCaptionsApplied}>
-              <div className={style.sample} style={this.state.customTextStyle.toCSS()}>
+              <div className={[style.sample, style.custom].join(' ')} style={this.state.customTextStyle.toCSS()}>
                 <span>Custom captions</span>
                 <div className={style.activeTick}><Icon type={IconType.Check} /></div>
               </div>

diff --git a/src/components/overlay/_overlay.scss b/src/components/overlay/_overlay.scss
@@ -9,7 +9,7 @@
   display: none;
   opacity: 0;
   animation: openOverlay 100ms ease-in-out forwards;
-  z-index: 4;
+  z-index: 11;
 
   &.active {
     display: block;