Improve mobile dropdown styling

framework/core/ember/app/styles/flarum/dropdowns.less

@@ -32,7 +32,7 @@
 }
 
 // PHONES
-@media (max-width: @screen-xs-max) {
+@media @phone {
   .dropdown-open {
     overflow: hidden;
   }
@@ -49,22 +49,11 @@
     display: block;
     max-height: 100vh;
     border-radius: 0;
-    .box-shadow(none);
-    .transition(bottom 0.3s);
+    .box-shadow(0 2px 6px @fl-shadow-color);
+    .translate3d(0, 0, 0);
+    visibility: hidden;
+    .transition(~"bottom 0.3s, visibility 0s 0.3s");
 
-    &:before {
-      content: " ";
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 100%;
-      height: 200vh;
-      z-index: -1;
-      background: fade(@fl-body-primary-color, 90%);
-      pointer-events: none;
-      opacity: 0;
-      .transition(opacity 0.3s);
-    }
     & > li > a {
       background: #fff;
       font-size: 16px;
@@ -81,11 +70,17 @@
 
     .open & {
       bottom: 0;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+  }
+  .dropdown-backdrop {
+    background: fade(@fl-body-primary-color, 90%);
+    opacity: 0;
+    .transition(~"opacity 0.3s");
 
-      &:before {
-        opacity: 1;
-        pointer-events: auto;
-      }
+    .open & {
+      opacity: 1;
     }
   }
 }