Fix order by dropdown alignment in mobile screens

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -44,11 +44,16 @@ $column-right-gradient: linear-gradient(
     @include media-breakpoint-down(xs) {
       display: flex;
 
-      .dropdown-toggle .fa-chevron-down {
-        position: relative;
-        top: 5px;
-        right: 0;
-        float: right;
+      .dropdown-menu-sort {
+        // This is a hack to fix dropdown alignment in small screens
+        // where Bootstrap applies inline `transform: translate3d(...)`
+        // and since our dropdown button has sort direction button
+        // present, alignment needs to compensate for that space
+        // without which it appears shifted towards left.
+        //
+        // One more approach is to override `transform` using `!important`
+        // but that too involves using magic number
+        margin-left: 27px;
       }
     }
   }
@@ -92,7 +97,7 @@ $column-right-gradient: linear-gradient(
 
 .roadmap-timeline-section .timeline-header-blank::after,
 .epics-list-section .epic-details-cell::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   right: -$grid-size;
@@ -176,7 +181,7 @@ $column-right-gradient: linear-gradient(
       }
 
       .today-bar::before {
-        content: '';
+        content: "";
         position: absolute;
         top: -2px;
         left: -3px;
@@ -190,7 +195,7 @@ $column-right-gradient: linear-gradient(
 
   &.scroll-top-shadow .timeline-header-blank::before {
     @include roadmap-scroll-mixin;
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     bottom: -$grid-size;
@@ -296,7 +301,7 @@ $column-right-gradient: linear-gradient(
 
         &.start-date-outside::before,
         &.end-date-outside::after {
-          content: '';
+          content: "";
           position: absolute;
           top: 0;
           height: 100%;