Fix overlap not clickable

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css

@@ -1,17 +1,20 @@
-.viewingOptions {
+.root {
   float: right;
   text-align: right;
   position: relative;
   display: inline-block;
   min-width: 220px;
-}
-
-.viewingOptions {
-  cursor: pointer;
-}
-
-.streamViewingOptionsList {
   z-index: 10;
+  position: relative;
+  cursor: pointer;
+  &::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+}
+
+.list {
   background: white;
   position: absolute;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
@@ -19,12 +22,12 @@
   top: 20px;
 }
 
-.streamViewingOptionsList ul, .streamViewingOptionsList li {
+.list > ul, .list > ul > li {
   padding: 0;
   margin: 0;
 }
 
-.streamViewingOptionsList li {
+.list > ul > li {
   padding: 10px;
   list-style: none;
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -13,7 +13,7 @@ const ViewingOptions = (props) => {
     }
   };
   return (
-    <div className={cn([styles.viewingOptions, 'coral-plugin-viewing-options'])}>
+    <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
       <div>
         <a onClick={toggleOpen}>Viewing Options
           {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
@@ -21,7 +21,7 @@ const ViewingOptions = (props) => {
       </div>
       {
         props.open ? (
-          <div className={cn([styles.streamViewingOptionsList, 'coral-plugin-viewing-options-list'])}>
+          <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
             <ul>
               {
                 React.Children.map(<Slot fill="viewingOptions" />, (component) => {