diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass
index 78ca8e8..7592019 100644
--- a/src/styles/_app_base.sass
+++ b/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
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index 49a9487..dafae45 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -1,181 +1,183 @@
-.table#shot-list
-	background-color: white
-	.table-row:hover
-		background-color: $color-background-light
+#shot-list
+	overflow-x: hidden
+	.table
+		background-color: white
+		.table-row:hover
+			background-color: $color-background-light
 
-	.table-cell
-		&.shot-status
-			width: 5px
-			height: 100%
-	.table-head
 		.table-cell
-			text-align: center
+			&.shot-status
+				width: 5px
+				height: 100%
+		.table-head
+			.table-cell
+				text-align: center
 
-			&.highlight .collapser
-				color: $color-primary-dark
+				&.highlight .collapser
+					color: $color-primary-dark
 
-			&.shot-thumbnail
-				width: $shots-list-thumbnail-width
+				&.shot-thumbnail
+					width: $shots-list-thumbnail-width
 
-			&.task-type
-				text-transform: capitalize
+				&.task-type
+					text-transform: capitalize
 
-			span.collapser
-				cursor: pointer
-				width: 100%
-				display: inline-block
-				padding: 5px
-
-			&:hover
 				span.collapser
-					color: $color-primary
+					cursor: pointer
+					width: 100%
+					display: inline-block
+					padding: 5px
 
-	.table-body
-		display: table-row-group
+				&:hover
+					span.collapser
+						color: $color-primary
 
-		.table-row
-			position: relative
+		.table-body
+			display: table-row-group
 
-			&.active
-				background-color: $color-background-active
-
-				.table-cell
-					border-bottom-color: darken($color-background-active, 15%)
-				.table-cell:last-child
-					box-shadow: inset -5px 0 0 $color-primary
-
-			&.not-in-edit
-				+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)
-
-				.table-cell
-					&.shot-name a
-						color: $color-text-dark-secondary
-
-					&.shot-status
-						opacity: .2
-
-					&.task-type .task-link
-						&:before
-							opacity: .3
-							background: transparent
-							border: 2px solid $color-text-dark-secondary
-
-					&.shot-thumbnail img
-						opacity: .5
+			.table-row
+				position: relative
 
 				&.active
-					+stripes(white, rgba($color-background-active, .8), 90deg, 28px)
+					background-color: $color-background-active
 
-				&:hover, &.active
 					.table-cell
-						&.shot-thumbnail img
-							opacity: 1
+						border-bottom-color: darken($color-background-active, 15%)
+					.table-cell:last-child
+						box-shadow: inset -5px 0 0 $color-primary
+
+				&.not-in-edit
+					+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)
+
+					.table-cell
+						&.shot-name a
+							color: $color-text-dark-secondary
+
+						&.shot-status
+							opacity: .2
+
 						&.task-type .task-link
-							@include status-color-property(background-color, ':before', '')
-
 							&:before
-								opacity: 1
-								border: none
+								opacity: .3
+								background: transparent
+								border: 2px solid $color-text-dark-secondary
 
-			@include status-color-property(background-color, ' .shot-status', '')
-
-		.table-cell
-			text-align: center
-			border-left: thin solid transparent
-			border-right: thin solid transparent
-
-			&.active
-				background-color: $color-background
-
-			&.highlight
-				background-color: $color-background-light
-
-			&.shot-name
-				text-align: left
-				position: relative
-				height: 100%
-				a
-					display: flex
-					padding: 5px 10px
-					color: $color-text-dark-primary
-
-					span
-						margin: auto 0
-
-			&.shot-thumbnail img
-				transition: opacity 150ms ease-in-out
-
-			&.task-type
-				position: relative
-				height: 100%
-				overflow: hidden
-				white-space: nowrap
-
-				a
-					display: inline-block /* Each task next to each other */
-					vertical-align: middle
-					height: 100%
-					min-height: 100%
-					padding: 15px
-					transition: all 150ms ease-in-out
-					position: relative
-
-					@include status-color-property(background-color, ':before', '')
-
-					&:focus
-						outline: none
-
-						&:before
-							transform: translate(-50%, -50%) scale(1.5)
-
-					&:before
-						display: block
-						content: ''
-						position: absolute
-						width: 16px
-						height: 16px
-						border-radius: 50%
-						border: 2px solid transparent
-						+position-center-translate
-						transition: all 150ms ease-in-out
-
-					span
-						display: block
-						+position-center-translate
-						z-index: 1
-						font:
-							weight: bold
-							size: .8em
-						text:
-							align: center
-							transform: capitalize
-						color: white
+						&.shot-thumbnail img
+							opacity: .5
 
 					&.active
-						opacity: 1
+						+stripes(white, rgba($color-background-active, .8), 90deg, 28px)
+
+					&:hover, &.active
+						.table-cell
+							&.shot-thumbnail img
+								opacity: 1
+							&.task-type .task-link
+								@include status-color-property(background-color, ':before', '')
+
+								&:before
+									opacity: 1
+									border: none
+
+				@include status-color-property(background-color, ' .shot-status', '')
+
+			.table-cell
+				text-align: center
+				border-left: thin solid transparent
+				border-right: thin solid transparent
+
+				&.active
+					background-color: $color-background
+
+				&.highlight
+					background-color: $color-background-light
+
+				&.shot-name
+					text-align: left
+					position: relative
+					height: 100%
+					a
+						display: flex
+						padding: 5px 10px
+						color: $color-text-dark-primary
+
+						span
+							margin: auto 0
+
+				&.shot-thumbnail img
+					transition: opacity 150ms ease-in-out
+
+				&.task-type
+					position: relative
+					height: 100%
+					overflow: hidden
+					white-space: nowrap
+
+					a
+						display: inline-block /* Each task next to each other */
+						vertical-align: middle
+						height: 100%
+						min-height: 100%
+						padding: 15px
+						transition: all 150ms ease-in-out
+						position: relative
+
+						@include status-color-property(background-color, ':before', '')
+
+						&:focus
+							outline: none
+
+							&:before
+								transform: translate(-50%, -50%) scale(1.5)
 
 						&:before
-							transform: translate(-50%, -50%) scale(1.3)
-							border: 2px solid white
-							box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)
-						&:hover
-							border-color: $color-primary-light
+							display: block
+							content: ''
+							position: absolute
+							width: 16px
+							height: 16px
+							border-radius: 50%
+							border: 2px solid transparent
+							+position-center-translate
+							transition: all 150ms ease-in-out
 
-					&.task-add
-						width: auto
-						border-radius: initial
-						opacity: 0
-						vertical-align: middle
-						padding: 5px
-						display: flex
-						justify-content: center
+						span
+							display: block
+							+position-center-translate
+							z-index: 1
+							font:
+								weight: bold
+								size: .8em
+							text:
+								align: center
+								transform: capitalize
+							color: white
 
-						&:hover, &:focus
+						&.active
 							opacity: 1
 
-					&:hover
-						&:before
-							opacity: .8
-							transform: translate(-50%, -50%) scale(1.2)
-						&.active:before
-							transform: translate(-50%, -50%) scale(1.3)
+							&:before
+								transform: translate(-50%, -50%) scale(1.3)
+								border: 2px solid white
+								box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)
+							&:hover
+								border-color: $color-primary-light
+
+						&.task-add
+							width: auto
+							border-radius: initial
+							opacity: 0
+							vertical-align: middle
+							padding: 5px
+							display: flex
+							justify-content: center
+
+							&:hover, &:focus
+								opacity: 1
+
+						&:hover
+							&:before
+								opacity: .8
+								transform: translate(-50%, -50%) scale(1.2)
+							&.active:before
+								transform: translate(-50%, -50%) scale(1.3)
diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass
index 24570c4..0930db1 100644
--- a/src/styles/_tasks.sass
+++ b/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
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 6d2bef1..6bfcaa4 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -11,63 +11,64 @@
 		a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
 		| #}
 
-	.table#shot-list
-		.table-head
-			.table-row
-				.table-cell.shot-status
-				.table-cell.shot-thumbnail
-					span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
-				.table-cell.shot-name
-					span.collapser(title="Collapse name column") Name
-				| {% for task_type in task_types %}
-				.table-cell.task-type(class="{{ task_type }}")
-					span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
-				| {% endfor %}
-
-		.table-body.has-thumbnails
-			| {% for shot in shots %}
-			.table-row(
-				id="shot-{{ shot._id }}",
-				class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
-				.table-cell.shot-status
-				.table-cell.shot-thumbnail
-					a(
-						data-shot-id="{{ shot._id }}",
-						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
-						class="status-{{ shot.properties.status }} shot-link")
-						img(src="{{ shot._thumbnail }}",
-							alt="Thumbnail",
-							style='width: 110px; height: {{ shot._thumbnail_height }}')
-				.table-cell.shot-name
-					a(
-						data-shot-id="{{ shot._id }}",
-						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
-						class="status-{{ shot.properties.status }} shot-link")
-						span(class="shot-name-{{ shot._id }}") {{ shot.name }}
-				| {% for task_type in task_types %}
-				.table-cell.task-type(class="{{ task_type }}")
-					| {% for task in tasks_for_shots[shot._id][task_type] %}
-					a(
-						data-task-id="{{ task._id }}",
-						id="task-{{ task._id }}",
-						href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
-						class="status-{{ task.properties.status }} task-link",
-						title="{{ task.properties.status | undertitle }} task: {{ task.name }}")
-						| {# First letter of the status. Disabled until we provide the user setting to turn it off
-						span {{ task.properties.status[0] }}
-						| #}
+	#shot-list
+		.table
+			.table-head
+				.table-row
+					.table-cell.shot-status
+					.table-cell.shot-thumbnail
+						span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
+					.table-cell.shot-name
+						span.collapser(title="Collapse name column") Name
+					| {% for task_type in task_types %}
+					.table-cell.task-type(class="{{ task_type }}")
+						span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
+					| {% endfor %}
+
+			.table-body.has-thumbnails
+				| {% for shot in shots %}
+				.table-row(
+					id="shot-{{ shot._id }}",
+					class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
+					.table-cell.shot-status
+					.table-cell.shot-thumbnail
+						a(
+							data-shot-id="{{ shot._id }}",
+							href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
+							class="status-{{ shot.properties.status }} shot-link")
+							img(src="{{ shot._thumbnail }}",
+								alt="Thumbnail",
+								style='width: 110px; height: {{ shot._thumbnail_height }}')
+					.table-cell.shot-name
+						a(
+							data-shot-id="{{ shot._id }}",
+							href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
+							class="status-{{ shot.properties.status }} shot-link")
+							span(class="shot-name-{{ shot._id }}") {{ shot.name }}
+					| {% for task_type in task_types %}
+					.table-cell.task-type(class="{{ task_type }}")
+						| {% for task in tasks_for_shots[shot._id][task_type] %}
+						a(
+							data-task-id="{{ task._id }}",
+							id="task-{{ task._id }}",
+							href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
+							class="status-{{ task.properties.status }} task-link",
+							title="{{ task.properties.status | undertitle }} task: {{ task.name }}")
+							| {# First letter of the status. Disabled until we provide the user setting to turn it off
+							span {{ task.properties.status[0] }}
+							| #}
+						| {% endfor %}
+						//- Dirty hack, assume a user can create a task for a shot if they can edit the shot.
+						| {% if 'PUT' in shot.allowed_methods %}
+						a.task-add(
+							title="Add a new '{{ task_type }}' task",
+							class="task-add-link {% if tasks_for_shots[shot._id][task_type] %}hidden{% endif %}"
+							href="javascript:task_create('{{ shot._id }}', '{{ task_type }}');")
+							i.pi-plus
+							| Task
+						| {% endif %}
 					| {% endfor %}
-					//- Dirty hack, assume a user can create a task for a shot if they can edit the shot.
-					| {% if 'PUT' in shot.allowed_methods %}
-					a.task-add(
-						title="Add a new '{{ task_type }}' task",
-						class="task-add-link {% if tasks_for_shots[shot._id][task_type] %}hidden{% endif %}"
-						href="javascript:task_create('{{ shot._id }}', '{{ task_type }}');")
-						i.pi-plus
-						| Task
-					| {% endif %}
 				| {% endfor %}
-			| {% endfor %}
 
 .col-splitter
 
@@ -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 %}
diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade
index 54791da..20e895b 100644
--- a/src/templates/attract/tasks/for_project.jade
+++ b/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 %}