Fix user-select in firefox, safari (webkit)

src/assets/stylesheets/2d-hud.scss

 @import 'shared';
 
+:local(.unselectable) {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 :local(.container) {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
-  user-select: none;
 
   &:local(.top) {
     top: 10px;

src/react-components/2d-hud.js

@@ -5,7 +5,7 @@ import cx from "classnames";
 import styles from "../assets/stylesheets/2d-hud.scss";
 
 const TopHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
-  <div className={cx(styles.container, styles.top)}>
+  <div className={cx(styles.container, styles.top, styles.unselectable)}>
     <div className={cx("ui-interactive", styles.panel, styles.left)}>
       <div
         className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
@@ -38,7 +38,7 @@ TopHUD.propTypes = {
 };
 
 const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
-  <div className={cx(styles.container, styles.column, styles.bottom)}>
+  <div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
     {showPhotoPicker ? (
       <div className={cx("ui-interactive", styles.panel, styles.up)}>
         <input