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
-	flex-direction: column
+	overflow-x: hidden
 
 	.item-details-empty
 		display: flex