Fix mobile dropdown bug

app/assets/stylesheets/framework/nav.scss

@@ -209,6 +209,15 @@
     float: right;
     padding: 7px 0 0;
 
+    @media (max-width: $screen-xs-min) {
+      float: none;
+      padding: 0 9px;
+
+      .dropdown-new {
+        width: 100%;
+      }
+    }
+
     i {
       color: $layout-link-gray;
     }
@@ -225,6 +234,10 @@
 
     .dropdown {
       margin-left: 7px;
+
+      @media (max-width: $screen-xs-min) {
+        margin-left: 0;
+      }
     }
   }
 
@@ -260,4 +273,10 @@
 
 .page-with-layout-nav {
   margin-top: 50px;
+
+  &.controls-dropdown-visible {
+    @media (max-width: $screen-xs-min) {
+      margin-top: 96px;
+    }
+  }
 }

app/helpers/nav_helper.rb

@@ -43,4 +43,12 @@ module NavHelper
     class_name += " with-horizontal-nav" if defined?(nav) && nav
     class_name
   end
+
+  def layout_nav_class
+    "page-with-layout-nav" if defined?(nav) && nav
+  end
+
+  def layout_dropdown_class
+    "controls-dropdown-visible" if current_user
+  end
 end

app/views/layouts/_page.html.haml

@@ -25,7 +25,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
+  .content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
     = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message

app/views/layouts/nav/_group_settings.html.haml

 - if current_user
   - if access = @group.users.find_by(id: current_user.id)
     .controls
-      %span.dropdown.group-settings-dropdown
+      .dropdown.group-settings-dropdown
         %a.dropdown-new.btn.btn-default#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
           = icon('cog')
           = icon('caret-down')