From 917ab3fe7b35cdfa3e9cdc02486b3fd5e508254a Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Tue, 16 Apr 2013 11:20:47 -0600
Subject: [PATCH] Ensure tree view highlights extend full-width, even when
 scrolled

The .tree-view-wrapper element is renamed to `.tree-view-resizer` to
clarify its purpose, and the actual draggable div is renamed to
`.tree-view-resize-handle`. Then a new div is introduced beneath the
resized wrapper called `tree-view-scroller`. This element has 100%
width/height and overflow scroll, allowing the actual tree view list
to *not* scroll. It uses the cutting edge `min-content` property as
its min width, which ensures it's always wide enough to contain its
content even when the scroller wrapper is narrower. This allows the
absolutely-positioned highlights to always extend *at least* across
the full width of the list elements.
---
 src/packages/tree-view/lib/tree-view.coffee       |  9 +++++----
 src/packages/tree-view/stylesheets/tree-view.less | 14 +++++++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/packages/tree-view/lib/tree-view.coffee b/src/packages/tree-view/lib/tree-view.coffee
index 2c474aece..e74454d9a 100644
--- a/src/packages/tree-view/lib/tree-view.coffee
+++ b/src/packages/tree-view/lib/tree-view.coffee
@@ -11,9 +11,10 @@ _ = require 'underscore'
 module.exports =
 class TreeView extends ScrollView
   @content: (rootView) ->
-    @div class: 'tree-view-wrapper', =>
-      @ol class: 'list-unstyled tree-view tool-panel', tabindex: -1, outlet: 'treeViewList'
-      @div class: 'tree-view-resizer', outlet: 'resizer'
+    @div class: 'tree-view-resizer', =>
+      @div class: 'tree-view-scroller', =>
+        @ol class: 'list-unstyled tree-view tool-panel', tabindex: -1, outlet: 'treeViewList'
+      @div class: 'tree-view-resize-handle', outlet: 'resizeHandle'
 
   root: null
   focusAfterAttach: false
@@ -23,7 +24,7 @@ class TreeView extends ScrollView
   initialize: (state) ->
     super
     @on 'click', '.entry', (e) => @entryClicked(e)
-    @on 'mousedown', '.tree-view-resizer', (e) => @resizeStarted(e)
+    @on 'mousedown', '.tree-view-resize-handle', (e) => @resizeStarted(e)
     @command 'core:move-up', => @moveUp()
     @command 'core:move-down', => @moveDown()
     @command 'core:close', => @detach(); false
diff --git a/src/packages/tree-view/stylesheets/tree-view.less b/src/packages/tree-view/stylesheets/tree-view.less
index aa0a102e4..f53902503 100644
--- a/src/packages/tree-view/stylesheets/tree-view.less
+++ b/src/packages/tree-view/stylesheets/tree-view.less
@@ -1,7 +1,7 @@
 @import "bootstrap/less/variables.less";
 @import "octicon-mixins.less";
 
-.tree-view-wrapper {
+.tree-view-resizer {
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -10,7 +10,7 @@
   min-width: 50px;
   z-index: 2;
 
-  .tree-view-resizer {
+  .tree-view-resize-handle {
     position: absolute;
     top: 0;
     right: 0;
@@ -21,14 +21,18 @@
   }
 }
 
+.tree-view-scroller {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+}
+
 .tree-view {
+  min-width: -webkit-min-content;
   @item-line-height: @line-height-base * 1.25;
   @disclosure-arrow-size: 12px;
   @icon-margin: @line-height-base / 4;
 
-  height: 100%;
-  width: 100%;
-  overflow: scroll;
   position: relative;
   padding: 0 @icon-margin;
   margin-bottom: 0;