Merge branch 'mobile-maximum-scale-1' into 'master'

Don't allow page to be scaled on mobile and add horizontal scrolling to code blocks

Closes #1974.

Previously, scaling (both automatically and manually) was enabled on mobile, which caused the top and sidebar to move over content. Scaling is now disabled.

Also previously, code in issues or comments too wide to fit inside the width of the window would "flow out" on the right, causing the whole page to become very wide and causing scrolling to scroll the entire page instead of just the code. Code blocks now scroll themselves.

See merge request !1501

CHANGELOG

@@ -75,6 +75,7 @@ v 7.8.0 (unreleased)
   - Added support for firing system hooks on group create/destroy and adding/removing users to group (Boyan Tabakov)
   - Added persistent collapse button for left side nav bar (Jason Blanchard)
   - Prevent losing unsaved comments by automatically restoring them when comment page is loaded again.
+  - Don't allow page to be scaled on mobile.
 
 v 7.7.2
   - Update GitLab Shell to version 2.4.2 that fixes a bug when developers can push to protected branch

app/assets/stylesheets/generic/common.scss

@@ -333,6 +333,10 @@ table {
   margin-bottom: 9px;
 }
 
+.wiki .code {
+  overflow-x: auto;
+}
+
 .footer-links a {
   margin-right: 15px;
 }

app/assets/stylesheets/generic/highlight.scss

@@ -59,6 +59,7 @@
   box-shadow: none;
   background: $box_bg;
   padding: 1em;
+  overflow-x: auto;
 
   code {
     font-family: $monospace_font;

app/views/layouts/_head.html.haml

@@ -18,7 +18,7 @@
   = javascript_include_tag "application"
   = csrf_meta_tags
   = include_gon
-  %meta{name: 'viewport', content: 'width=device-width, initial-scale=1.0'}
+  %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1'}
   %meta{name: 'theme-color', content: '#474D57'}
 
   = render 'layouts/google_analytics' if extra_config.has_key?('google_analytics_id')