Add styles to look good on windows in general.

app/assets/javascripts/dispatcher.js

@@ -72,11 +72,22 @@ import RepoBundle from './repo/repo_bundle';
     }
 
     Dispatcher.prototype.initPageScripts = function() {
-      var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
+      var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl, os;
       page = $('body').attr('data-page');
       if (!page) {
         return false;
       }
+
+
+      function getScrollBarWidth () {
+        var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
+              widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
+        $outer.remove();
+        return 100 - widthWithScroll;
+      };
+
+      $('body').attr('data-scroll-width', getScrollBarWidth());
+
       path = page.split(':');
       shortcut_handler = null;
 

app/assets/javascripts/repo/repo_store.js

@@ -14,6 +14,8 @@ let RepoStore = {
   files: [],
   binary: false,
   binaryMimeType: '',
+  //scroll bar space for windows
+  scrollWidth: 0,
   binaryTypes: {
     png: false
   }

app/assets/javascripts/repo/repo_tabs.js

@@ -5,6 +5,7 @@ import RepoMiniMixin from './repo_mini_mixin'
 
 export default class RepoTabs {
   constructor() {
+    this.styleTabsForWindows();
     this.initVue();
   }
 
@@ -18,4 +19,10 @@ export default class RepoTabs {
       data: () => Store,
     });
   }
+
+  styleTabsForWindows() {
+    const scrollWidth = Number(document.body.dataset.scrollWidth);
+    Store.scrollWidth = scrollWidth;
+    console.log(Store.scrollWidth)
+  }
 }

app/assets/stylesheets/pages/repo.scss

@@ -38,7 +38,8 @@ header {
     display: inline-block;
     white-space: nowrap;
     width: 100%;
-    overflow: scroll;
+    overflow-y: none;
+    overflow-x: scroll;
 
     li {
       list-style-type: none;

app/views/projects/tree/_tree_content.html.haml

@@ -13,7 +13,7 @@
       %tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
       %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree" }
   .panel-right>
-    %ul#tabs{"v-if" => "isMini"}
+    %ul#tabs{"v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}"}
       %li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }
     #ide{ data: { url: repo_url } }
     #binary-viewer{ "v-if" => "binary" }