Make color picker visible

mozilla-services · Feb 15, 2018 · cf3aa76 · cf3aa76
1 parent f58f4c9
commit cf3aa76
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
@@ -130,7 +130,7 @@ exports.Editor = class Editor extends React.Component {
     const penState = this.state.tool === "pen" ? "active" : "inactive";
     const highlighterState = this.state.tool === "highlighter" ? "active" : "inactive";
     return <div className="editor-header default-color-scheme">
-      <div className="shot-main-actions">
+      <div className="shot-main-actions annotation-main-actions">
         <div className="annotation-tools">
           <Localized id="annotationCropButton">
             <button className={`button transparent crop-button`} id="crop" onClick={this.onClickCrop.bind(this)} title="Crop"></button>

diff --git a/static/css/frame.scss b/static/css/frame.scss
@@ -423,6 +423,7 @@ body {
   display: flex;
   justify-content: space-between;
   height: 100px;
+  z-index: 2;
 
   .button {
     margin: $grid-unit * 0.25;
@@ -467,6 +468,10 @@ body {
   }
 }
 
+.annotation-main-actions {
+  overflow: visible;
+}
+
 .annotation-alt-actions {
   height: 72px;
   @include respond-to("small") {
@@ -482,6 +487,7 @@ body {
   justify-content: center;
   position: relative;
   flex: 1;
+  z-index: 1;
 
   @include respond-to("small") {
     top: $grid-unit * 4;