WIP

gui/app/styles/base.scss

@@ -22,9 +22,9 @@ html {
 
 body {
 	display: flex;
+	flex-direction: column;
 	height: 100%;
 	// height: 100vh;
-	flex-direction: column;
 }
 
 a {
@@ -127,6 +127,20 @@ input:-webkit-autofill {
 	white-space: nowrap;
 }
 
+::-webkit-scrollbar {
+    width: 7px;
+}
+::-webkit-scrollbar-track {
+    background: $color-off-white;
+}
+::-webkit-scrollbar-thumb {
+	background: $color-gray-light;
+
+	&:hover {
+		background: $color-gray;
+	}
+}
+
 $i: 150;
 @while $i > 0 {
 	.margin-#{$i} {

gui/app/styles/layout/layout-master.scss

@@ -32,16 +32,21 @@ footer {
 	}
 
 	.layout-content {
-		flex: 1;
+		// Content area cannot exceed 1200px
+		// but can shrink as required
+		// (was flex: 1;).
+		flex: 0 1 1000px;
+		// flex: 1;
+
 		padding: 0 2rem;
 		margin: 0;
 	}
 
 	.layout-sidebar {
 		flex: 0 0 20rem;
-		height: calc(100vh - 145px);
+		// height: calc(100vh - 145px);
 		overflow-x: hidden;
-		overflow-y: scroll;
+		overflow-y: auto;
 	}
 }
 

gui/app/styles/layout/layout-sidebar.scss

@@ -5,3 +5,7 @@
 .sidebar-white {
 	background-color: $color-white;
 }
+
+.sidebar-center {
+	text-align: center;
+}

gui/app/styles/mixins.scss

@@ -30,6 +30,18 @@
 	border-bottom-right-radius: $radius;
 }
 
+@mixin border-radius-top($radius)
+{
+	border-top-left-radius: $radius;
+	border-top-right-radius: $radius;
+}
+
+@mixin border-radius-bottom($radius)
+{
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
+}
+
 @mixin ease-in()
 {
 	-webkit-transition: all 0.30s ease-in-out;

gui/app/styles/widget/widget-tabnav.scss

@@ -33,7 +33,24 @@
 		}
 	}
 
+	> .tab-vertical {
+		display: block;
+		margin-left: 0;
+
+		&:first-of-type {
+			@include border-radius-top(3px);
+		}
+
+		&:last-of-type {
+			@include border-radius-bottom(3px);
+		}
+	}
+
 	> .selected {
 		background-color: $color-primary-light;
 	}
 }
+
+.tabnav-control-centered {
+	margin: 0 auto !important;
+}