Individual scroll for shot/tasks list and item details

src/styles/_app_base.sass

@@ -18,6 +18,8 @@ body
 		nav.sidebar .navbar-item.attract
 			+sidebar-button-active
 
+$splitter-width: 6px
+
 #app-main
 	display: flex
 	align-items: stretch
@@ -54,10 +56,11 @@ body
 
 #col_right
 	flex: 1 1 auto
-	padding-left: 8px // to compensate width of the splitter, which is positioned 'fixed'
+	padding-left: $splitter-width // to compensate width of the splitter, which is positioned 'fixed'
 
 .col_header
 	position: relative
+	z-index: 1
 	display: flex
 	align-items: center
 	width: 100%
@@ -67,6 +70,7 @@ body
 
 	font-size: 1.2em
 	border-bottom: thin solid $color-background
+	box-shadow: 0 0 15px rgba(black, .2)
 
 	&.scrolled
 		box-shadow: 0 -2px 20px rgba(black, .2)
@@ -98,7 +102,7 @@ body
 
 .col-splitter
 	flex: 0 0 auto
-	width: 8px
+	width: $splitter-width
 	background-color: $color-background
 	min-height: 200px
 	cursor: col-resize
@@ -111,6 +115,15 @@ body
 		display: none
 		visibility: hidden
 
+::-webkit-scrollbar
+	width: 5px
+
+::-webkit-scrollbar-track
+	background-color: $color-background
+
+::-webkit-scrollbar-thumb
+	background-color: $color-text-dark-hint
+
 .flyout.notifications
 	left: $sidebar-width + 5
 	top: initial
@@ -492,8 +505,7 @@ input, input.form-control
 
 
 #item-details
-	display: flex
+	overflow-x: hidden
-	flex-direction: column
 
 	.item-details-empty
 		display: flex

src/styles/_shots.sass

@@ -1,4 +1,6 @@
-.table#shot-list
+#shot-list
+	overflow-x: hidden
+	.table
 		background-color: white
 		.table-row:hover
 			background-color: $color-background-light

src/styles/_tasks.sass

@@ -90,6 +90,9 @@
 .attract-box+.attract-box
 	margin-top: 0
 
+#task-list
+	overflow-x: hidden
+
 #task-add
 	margin-left: auto
 	font-size: .85em
@@ -164,7 +167,6 @@ option.invalid_task
 	background-color: hsl(hue($color-danger), 80%, 90%)
 
 .task-list-header
-	border-right: thin solid $color-background
 	a
 		color: $color-text-dark
 		+text-overflow-ellipsis

src/templates/attract/shots/for_project.jade

@@ -11,7 +11,8 @@
 		a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
 		| #}
 
-	.table#shot-list
+	#shot-list
+		.table
 			.table-head
 				.table-row
 					.table-cell.shot-status
@@ -134,4 +135,10 @@ script.
 		resizeHeight: false
 	});
 
+	$(window).on('load resize', function(){
+		var window_height = $(window).height() - 50; // header is 50px
+		$('#shot-list').css({'height': window_height});
+		$('#item-details').css({'height': window_height});
+	});
+
 | {% endblock footer_scripts %}

src/templates/attract/tasks/for_project.jade

@@ -45,9 +45,18 @@ script.
 
 script(src="{{ url_for('static_attract', filename='assets/js/vendor/clipboard.min.js')}}")
 script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
+
 script.
 	$("#col_main").resizable({
 		handleSelector: ".col-splitter",
 		resizeHeight: false
 	});
+
+	$(window).on('load resize', function(){
+		var window_height = $(window).height() - 50;
+		var task_list = document.getElementById('task-list');
+		$('#task-list').css({'height': window_height});
+		$('#item-details').css({'height': window_height});
+	});
+
 | {% endblock %}