Have settings button stay on small screen

What does this MR do?

Updates style to prevent Settings (Gear) button from disappearing on small screens.

Are there points in the code the reviewer needs to double check?

• Line 343 of app/assets/stylesheets/framework/nav.scss
  • I chose a max-width of calc(100% - 50px). There may be another more suitable value.
• Line 288 of app/assets/stylesheets/framework/nav.scss
  • Top changed to 14px after removing the btn class
• Line 30 of app/assets/stylesheets/framework/dropdowns.scss
  • Removing the width: 100%; on small screens leaves width at 240px. This still seems reasonable and tested on a device as small as iPhone 4.

CSS Changes

• dropdown-menu-nav

./app/views/layouts/header/_default.html.haml:45:              .dropdown-menu-nav.dropdown-menu-align-right

• .scrolling-tabs-container.nav-control

./app/views/layouts/nav/_admin.html.haml:1:.scrolling-tabs-container{ class: nav_control_class }
./app/views/layouts/nav/_group.html.haml:2:.scrolling-tabs-container{ class: nav_control_class }
./app/views/layouts/nav/_project.html.haml:27:.scrolling-tabs-container{ class: nav_control_class }

• controls

./app/views/admin/deploy_keys/index.html.haml:5:    .controls
./app/views/admin/groups/_group.html.haml:4:  .controls
./app/views/admin/hooks/index.html.haml:64:          .controls
./app/views/admin/projects/index.html.haml:69:            .controls
./app/views/admin/users/_user.html.haml:17:  .controls
./app/views/dashboard/_activities.html.haml:6:    .controls
./app/views/dashboard/snippets/index.html.haml:7:  .controls
./app/views/groups/_activities.html.haml:6:    .controls
./app/views/groups/group_members/index.html.haml:21:      .controls
./app/views/groups/projects.html.haml:8:      .controls
./app/views/layouts/nav/_admin_settings.html.haml:1:.controls
./app/views/layouts/nav/_group_settings.html.haml:8:    .controls
./app/views/layouts/nav/_project.html.haml:2:  .controls
./app/views/projects/_activity.html.haml:3:    .controls
./app/views/projects/branches/_branch.html.haml:22:    .controls.hidden-xs
./app/views/projects/ci/pipelines/_pipeline.html.haml:61:    .controls.hidden-xs.pull-right
./app/views/projects/container_registry/_tag.html.haml:27:      .controls.hidden-xs.pull-right
./app/views/projects/diffs/_image.html.haml:58:        .controls
./app/views/projects/issues/_issue.html.haml:10:    %ul.controls
./app/views/projects/merge_requests/_merge_request.html.haml:9:    %ul.controls
./app/views/projects/network/show.html.haml:9:    .controls
./app/views/projects/project_members/_group_members.html.haml:7:      .controls
./app/views/projects/project_members/_team.html.haml:6:    .controls
./app/views/projects/project_members/index.html.haml:8:        .controls
./app/views/projects/tags/_tag.html.haml:13:    .controls
./app/views/shared/groups/_group.html.haml:7:    .controls.hidden-xs
./app/views/shared/members/_member.html.haml:7:    .controls
./app/views/shared/projects/_project.html.haml:14:    .controls

Why was this MR needed?

When viewing projects page on small devices the settings button was unreachable.

Screenshots (if relevant)

Screens larger than small original

Small screens original

Screens larger than small with update

Small screens with update

Does this MR meet the acceptance criteria?

• CHANGELOG entry added
• Tests
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if you do - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #19164 (closed) #22023 (closed)