prevent accidental clicks from tiggering scroll

css/base.css

@@ -3146,12 +3146,6 @@ ul.tabbar li.active > a {
   background-color: #039be5;
 }
 
-#pinned-wrapper .menuTrigger.upper {
-  top: 0.25rem;
-}
-#pinned-wrapper .menuTrigger.lower {
-  bottom: 0.25rem;
-}
 #pinned-wrapper:hover .menuTrigger {
   opacity: 0.9;
 }
@@ -3159,6 +3153,22 @@ ul.tabbar li.active > a {
   color: #757575;
 }
 
+.pinned-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f8f8;
+  border-radius: 0 0.25rem 0.25rem 0;
+  justify-content: space-evenly;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.pinned-menu .menuTrigger {
+  position: relative;
+}
+
 /*
  Drag-and-drop area.
  */

src/widgets/pinned-messages.jsx

@@ -73,20 +73,24 @@ class PinnedMessages extends React.PureComponent {
         }
         <div className="pinned-scroll">{dots}</div>
         <div className="pinned" onClick={this.handleSelected}><p>{shown}</p></div>
-        {selected > 0 ?
+        <div className="pinned-menu">
           <span className="menuTrigger upper">
+            {selected > 0 ?
               <a href="#" onClick={this.handleMovePrev}>
                 <i className="material-icons">expand_less</i>
               </a>
+              : null
+            }
           </span>
-          : null}
-        {this.props.selected > 0 ?
           <span className="menuTrigger lower">
+            {this.props.selected > 0 ?
               <a href="#" onClick={this.handleMoveNext}>
                 <i className="material-icons">expand_more</i>
               </a>
+              : null
+            }
           </span>
-          : null}
+        </div>
       </div>) : null;
   }
 }

umd/index.dev.js

@@ -15091,21 +15091,23 @@ class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     }, dots), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "pinned",
       onClick: this.handleSelected
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, shown)), selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, shown)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "pinned-menu"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "menuTrigger upper"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    }, selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       onClick: this.handleMovePrev
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
-    }, "expand_less"))) : null, this.props.selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, "expand_less")) : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "menuTrigger lower"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    }, this.props.selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       onClick: this.handleMoveNext
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
-    }, "expand_more"))) : null) : null;
+    }, "expand_more")) : null))) : null;
   }
 }
 /* harmony default export */ __webpack_exports__["default"] = ((0,react_intl__WEBPACK_IMPORTED_MODULE_1__.injectIntl)(PinnedMessages));