From 27fb0f064f615e0a2cae451686be843e3d78938d Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 30 Sep 2015 17:01:47 +0200
Subject: [PATCH] ticket zoom: move sidebar tabs from scrollbar

---
 .../_application_controller_generic.coffee    | 19 ++++++++++++++++++-
 .../app/views/generic/sidebar_tabs.jst.eco    |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee
index a23456dfc..9a459f310 100644
--- a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee
@@ -604,7 +604,9 @@ class App.Sidebar extends App.Controller
     @toggleTabAction(name)
 
   render: =>
-    @html App.view('generic/sidebar_tabs')( items: @items )
+    @html App.view('generic/sidebar_tabs')
+      items: @items
+      scrollbarWidth: @getScrollBarWidth()
 
     # init content callback
     for item in @items
@@ -620,6 +622,21 @@ class App.Sidebar extends App.Controller
           type:  'small'
         )
 
+  getScrollBarWidth: ->
+    $outer = $('<div>').css(
+      visibility: 'hidden'
+      width: 100
+      overflow: 'scroll'
+    ).appendTo('body')
+
+    widthWithScroll = $('<div>').css(
+      width: '100%'
+    ).appendTo($outer).outerWidth()
+
+    $outer.remove()
+
+    return 100 - widthWithScroll
+
   toggleDropdown: (e) ->
     e.stopPropagation()
     $(e.currentTarget).next('.js-actions').find('.dropdown-toggle').dropdown('toggle')
diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
index b7b063d88..00dd0acb4 100644
--- a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
+++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
@@ -13,7 +13,7 @@
 
 </div>
 <% end %>
-<div class="tabsSidebar-tabs vertical justified">
+<div class="tabsSidebar-tabs vertical justified" style="margin-left: -<%- @scrollbarWidth %>px">
 <% for item in @items: %>
   <div class="tabsSidebar-tab" data-tab="<%= item.name %>">
     <%- @Icon(item.icon) %>