fix firefox drag bug

frontend/css/buttons.scss

@@ -312,6 +312,15 @@
       opacity: 1;
     }
   }
+  .step-block {
+    display: flex;
+    padding: 0;
+    .step-block-drag {
+      width: 100%;
+      padding: 0.2rem 0.8rem;
+      line-height: 3rem;
+    }
+  }
   &.quick-del {
     &:hover {
       background: lighten($red, 10%) !important;
@@ -334,6 +343,8 @@
   float: right;
   font-size: 1.4rem !important;
   padding-left: 1rem;
+  line-height: 3rem;
+  pointer-events: none;
 }
 
 .fb-toggle-button {

frontend/sequences/step_buttons/index.tsx

@@ -29,10 +29,12 @@ export function StepButton({ children, step, color, dispatch, current, index }:
         intent="step_splice"
         draggerId={NULL_DRAGGER_ID}>
         <button draggable={true}
-          className={`fb-button full-width block ${color}`}
+          className={`fb-button full-width block step-block ${color}`}
           onClick={stepClick(dispatch, step, current, index)}>
-          {children}
-          <i className="fa fa-arrows block-control" />
+          <div className="step-block-drag">
+            {children}
+            <i className="fa fa-arrows block-control" />
+          </div>
         </button>
       </StepDragger>
     </div>