Improve UI behavior at smaller screen sizes so status bar overflows (#158)

Also includes various CSS flex-related cleanup throughout the UI.
Progress for #150

client/web/src/components/window/MainWindow.vue

@@ -15,6 +15,7 @@
 <style lang="scss">
 .main-window {
 	height: 100%;
+	overflow: auto;
 }
 
 .title-bar-row {
@@ -24,11 +25,9 @@
 
 .workspace-row {
 	flex: 1 1 100%;
-	height: 100%;
 }
 
 .status-bar-row {
-	height: 24px;
 	flex: 0 0 auto;
 }
 </style>

client/web/src/components/window/status-bar/StatusBar.vue

@@ -28,6 +28,18 @@
 <style lang="scss">
 .status-bar {
 	display: flex;
+	flex-wrap: wrap;
+	margin: 0 -4px;
+	// TODO: Use CSS grid to solve issue that makes overflowed items have inconsistent left padding on second row when overflowed
+
+	> * {
+		height: 24px;
+	}
+
+	.separator.section {
+		height: 24px;
+		margin: 0;
+	}
 
 	.plus {
 		display: flex;
@@ -38,18 +50,6 @@
 	.user-input-label + .user-input-label {
 		margin-left: 0;
 	}
-
-	.separator.section {
-		margin: 0;
-	}
-
-	> :first-child {
-		margin-left: 4px;
-	}
-
-	> :last-child {
-		margin-right: 4px;
-	}
 }
 </style>