Merge branch 'contributors-graph-mobile' into 'master'

Apply responsive design for Contributors graphs.

## What does this MR do?

Makes the Contributors graphs work on mobile.

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

That this doesn't break on any screen sizes.

## Why was this MR needed?

It used to be squished and impossible to read.

## What are the relevant issue numbers?

Fixes #18845.

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-06-18_at_1.00.58_PM](/uploads/bc17df5dabed0085c8ffdca303a502a5/Screen_Shot_2016-06-18_at_1.00.58_PM.png)

After:

![Screen_Shot_2016-06-20_at_9.21.03_AM](/uploads/a0307cb255646800d0e4c8647769f7b6/Screen_Shot_2016-06-20_at_9.21.03_AM.png)

cc: @jschatz1 

See merge request !4801

app/assets/javascripts/graphs/stat_graph_contributors_graph.js.coffee

@@ -121,7 +121,11 @@ class @ContributorsMasterGraph extends ContributorsGraph
 
 class @ContributorsAuthorGraph extends ContributorsGraph
   constructor: (@data) ->
-    @width = $('.content').width()/2 - 100
+    # Don't split graph size in half for mobile devices.
+    if $(window).width() < 768
+      @width = $('.content').width() - 80
+    else
+      @width = ($('.content').width() / 2) - 100
     @height = 200
     @x = null
     @y = null

app/assets/stylesheets/pages/stat_graph.scss

@@ -25,13 +25,19 @@
     &:nth-child(even) {
       float: right;
     }
+
     float: left;
     margin-top: 10px;
+
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
   }
 
   .person .spark {
     display: block;
     background: #f3f3f3;
+    width: 100%;
   }
 
   .person .area-contributor {