Padding on list wrapper; Track action zones

src/js/components/List.js

@@ -39,12 +39,14 @@ class List extends React.Component{
 
 		return (
 			<div className="list-item header cf">
-				{
-					this.props.columns.map((col, col_index) => {
-						var className = 'col '+col.name.replace('.','_')
-						return <div className={className} key={col_index}>{ col.label ? col.label : col.name }</div>
-					})
-				}
+				<div className="liner">
+					{
+						this.props.columns.map((col, col_index) => {
+							var className = 'col '+col.name.replace('.','_')
+							return <div className={className} key={col_index}>{ col.label ? col.label : col.name }</div>
+						})
+					}
+				</div>
 			</div>
 		)
 	}
@@ -54,7 +56,7 @@ class List extends React.Component{
 		var value = row
 
 		for (var i = 0; i < key.length; i++){
-			if (typeof(value[key[i]]) === 'undefined'){
+			if (value[key[i]] === undefined){
 				return <span>-</span>
 			} else if (typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == ''){
 				return <span>-</span>

src/js/components/Track.js

@@ -262,7 +262,9 @@ export default class Track extends React.Component{
 			return (
 				<div className={className}>
 					{track_actions}
-					{track_columns}
+					<div className="liner">
+						{track_columns}
+					</div>
 				</div>
 			)
 		} else {

src/scss/components/_lists.scss

@@ -1,7 +1,6 @@
 
 .list {
 	.list-item {
-		@include clearfix;
 
 		-webkit-touch-callout: none;
 		-webkit-user-select: none;
@@ -12,13 +11,17 @@
 
 		display: block;
 		position: relative;
-		padding: 14px 30px 13px 10px;
 		margin: 0 -10px -1px -10px;
 		cursor: pointer;
 		border-radius: 3px;
 		border-bottom: 1px solid rgba(255,255,255,0.05);
 		border-top: 1px solid rgba(255,255,255,0.05);
 
+		.liner {
+			@include clearfix;
+			padding: 14px 30px 13px 10px;
+		}
+
 		&.selected {
 			background: rgba(255,255,255,0.08) !important;
 
@@ -229,11 +232,11 @@
 		.list-item {	
 
 			&.can-sort {
-				padding-left: 70px !important;
+				padding-left: 60px !important;
 			}
 			
 			&:not(.can-sort){
-				padding-left: 42px !important;
+				padding-left: 35px !important;
 			}
 
 			.select-zone {
@@ -247,8 +250,9 @@
 				
 				.fa {
 					position: absolute;
-					top: 27px;
+					top: 50%;
 					left: 17px;
+					margin-top: -3px;
 					pointer-events: none;
 					color: $white;
 					z-index: 1;
@@ -262,8 +266,9 @@
 					width: 14px;
 					height: 14px;
 					position: absolute;
-					top: 23px;
+					top: 50%;
 					left: 14px;
+					margin-top: -7px;
 				}
 			}
 
@@ -279,8 +284,9 @@
 				
 				.fa {
 					position: absolute;
-					top: 24px;
+					top: 50%;
 					left: 6px;
+					margin-top: -6px;
 					pointer-events: none;
 				}
 			}
@@ -290,7 +296,10 @@
 	@include responsive($bp_medium){
 
 		.list-item {
-			padding: 12px !important;
+
+			.liner {
+				padding: 12px !important;
+			}
 
 			.source {
 				position: static;