Simplify width for dropdown-menu on mobile

What does this MR do?

This fixes a bug that dropdown-menu-nav is broken on admin's secondary nav, applying these things:

• Fix the left-in right and min-width regression of !12388 (merged)
• Refactoring the fix of .badge in !9592 (merged)
• Fix a z-index regression

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

Yes, check if min-width: 180px is right.

Yes, check if min-width: 150px is right.

text-overflow doesn't look good enough.

Why was this MR needed?

The regression of !12388 (merged) breaks admin's secondary nav on mobile.

Screenshots (updated)

Target: Admin Settings Dropdown

before	after

Regression Tests

Regression Test 1: Global Nav Dropdown

before	after

Regression Test 2:

before	after

Other screenshots for regression tests are on https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12528#note_34624310 and https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12528#note_34639432.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• [n/a] Documentation created/updated
• [n/a] API support added
• Tests
  • [n/a] Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #34468 (closed), #35226 (closed)

cf. #34139 (closed)