From f9a3aa87370ae432a1db6a57af939bd672353156 Mon Sep 17 00:00:00 2001
From: Kjell Kvinge <kjell@kvinge.biz>
Date: Sun, 22 Jan 2017 13:10:01 +0100
Subject: [PATCH] add scroolbars to wide graphs. (#608)

* Add scrollbars to graph and revlist if needed.

* Add border
---
 public/css/gitgraph.css   | 9 +++++----
 public/js/draw.js         | 4 ----
 templates/repo/graph.tmpl | 2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/public/css/gitgraph.css b/public/css/gitgraph.css
index 930b15e2ef..3eba675177 100644
--- a/public/css/gitgraph.css
+++ b/public/css/gitgraph.css
@@ -2,14 +2,15 @@ body {font:13.34px/1.4 helvetica,arial,freesans,clean,sans-serif;}
 em {font-style:normal;}
 
 #git-graph-container, #rel-container {float:left;}
-#git-graph-container {}
-#git-graph-container li {list-style-type:none;height:20px;line-height:20px;overflow:hidden;}	
+#rel-container {max-width:30%; overflow-x:auto;}
+#git-graph-container {overflow-x:auto; width:100%}
+#git-graph-container li {list-style-type:none;height:20px;line-height:20px; white-space:nowrap;}
 #git-graph-container li .node-relation {font-family:'Bitstream Vera Sans Mono', 'Courier', monospace;}
 #git-graph-container li .author {color:#666666;}
 #git-graph-container li .time {color:#999999;font-size:80%}
 #git-graph-container li a {color:#000000;}
 #git-graph-container li a:hover {text-decoration:underline;}
 #git-graph-container li a em {color:#BB0000;border-bottom:1px dotted #BBBBBB;text-decoration:none;font-style:normal;}
-#rev-container {width:80%}
-#rev-list {margin:0;padding:0 5px 0 0;width:80%}
+#rev-container {width:100%}
+#rev-list {margin:0;padding:0 5px 0 5px;min-width:95%}
 #graph-raw-list {margin:0px;}
\ No newline at end of file
diff --git a/public/js/draw.js b/public/js/draw.js
index fadb3330b3..fd99e1a73d 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -10,8 +10,4 @@ $(document).ready(function () {
 	})
 	
 	gitGraph(document.getElementById('graph-canvas'), graphList);
-	
-	if ($("#rev-container")) {
-		$("#rev-container").css("width", document.body.clientWidth - document.getElementById('graph-canvas').width);
-	}
 })
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 622234cdea..28d6a4661a 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -4,7 +4,7 @@
 	<div class="ui container">
 
 
-	  <div id="git-graph-container">
+	  <div id="git-graph-container" class="ui segment">
 	    <div id="rel-container">
 	      <canvas id="graph-canvas">
 		<ul id="graph-raw-list">