Fix milestone overflow on smaller viewports

Summary

Overflowing content is not truncating or wrapping properly once hitting the 767px breakpoint, causing overlapping text and horizontal scrolling.

Discovered in !83557 (comment 887358862)

Steps to reproduce

Open any milestone page (/dashboard/milestones) and drop the size to at least 767

Example Project

What is the current bug behavior?

The UI doesn't accommodate smaller viewports

What is the expected correct behavior?

• The container change that occurs at 575 should happen at 767
• Long badges should truncate instead of overflow

Relevant logs and/or screenshots

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check

(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)
(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)
(we will only investigate if the tests are passing)

Implementation details

Rendering of milestone relies on bootstrap grid. Theoretically we can replace sm with md to trigger breakpoints earlier in app/views/shared/milestones/_milestone.html.haml

Also we will need to update app/assets/stylesheets/page_bundles/milestone.scss .milestone-actions to receive padding-top at md breakpoint, not at xs