diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css index ae5b67ef7..1f4a23cfe 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/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; } diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index 120ae99fd..a247aef18 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -13,7 +13,7 @@ const ViewingOptions = (props) => { } }; return ( -
+
Viewing Options {props.open ? : } @@ -21,7 +21,7 @@ const ViewingOptions = (props) => {
{ props.open ? ( -
+
    { React.Children.map(, (component) => {