fix scrollbar in ticketZoom: add gap for scrollbar

app/assets/javascripts/app/controllers/_application_controller_generic.coffee

@@ -619,7 +619,7 @@ class App.Sidebar extends App.Controller
   render: =>
     @html App.view('generic/sidebar_tabs')
       items: @items
-      scrollbarWidth: @getScrollBarWidth()
+      scrollbarWidth: App.Utils.getScrollBarWidth()
 
     # init content callback
     for item in @items
@@ -635,21 +635,6 @@ 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')

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -271,17 +271,12 @@ class App.TicketZoom extends App.Controller
     if not mainScrollHeigth > mainHeigth + headerHeight
       @scrollPageHeader.css('transform', "translateY(#{-headerHeight}px)")
 
-
     if scroll > headerHeight
       scroll = headerHeight
 
     if scroll is @scrollHeaderPos
       return
 
-    #marginTop: 0 .. headerHeight
-    @main.css('margin-top', scroll)
-    # translateY: 0 .. -headerHeight
-    @ticketZoom.css('transform', "translateY(-#{scroll}px)")
     # translateY: headerHeight .. 0
     @scrollPageHeader.css('transform', "translateY(#{scroll - headerHeight}px)")
 
@@ -295,11 +290,11 @@ class App.TicketZoom extends App.Controller
 
     if !@renderDone
       @renderDone = true
-      @html App.view('ticket_zoom')(
-        ticket:     @ticket
-        nav:        @nav
-        isCustomer: @isRole('Customer')
-      )
+      @html App.view('ticket_zoom')
+        ticket:         @ticket
+        nav:            @nav
+        isCustomer:     @isRole('Customer')
+        scrollbarWidth: App.Utils.getScrollBarWidth()
 
       new App.TicketZoomOverviewNavigator(
         el:          @$('.overview-navigator')

app/assets/javascripts/app/lib/app_post/utils.coffee

@@ -595,3 +595,18 @@ class App.Utils
 
   @icon: (name, className = '') ->
     "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#icon-#{name}\" /></svg>"
+
+  @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

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -1,5 +1,5 @@
 <div class="tabsSidebar-holder">
-  <div class="scrollPageHeader tabsSidebar-sidebarSpacer">
+  <div class="scrollPageHeader tabsSidebar-sidebarSpacer" style="right: <%- @scrollbarWidth %>px">
     <small><%- @C('ticket_hook') %> <span class="ticket-number"><%- @ticket.number %></span></small>
     <div class="ticket-title"></div>
     <div class="highlighter"></div>