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/panels/Document.vue

@@ -124,7 +124,8 @@
 	height: 100%;
 
 	.options-bar {
-		flex: 0 0 32px;
+		height: 32px;
+		flex: 0 0 auto;
 
 		.side {
 			height: 100%;
@@ -137,7 +138,9 @@
 
 	.shelf-and-viewport {
 		.shelf {
-			flex: 0 0 32px;
+			flex: 0 0 auto;
+			display: flex;
+			flex-direction: column;
 		}
 
 		.viewport {

client/web/src/components/panels/LayerTree.vue

@@ -39,6 +39,7 @@
 .layer-tree-panel {
 	.options-bar {
 		height: 32px;
+		flex: 0 0 auto;
 		margin: 0 4px;
 		align-items: center;
 

client/web/src/components/widgets/ShelfItem.vue

@@ -6,6 +6,7 @@
 
 <style lang="scss">
 .shelf-item {
+	flex: 0 0 auto;
 	border-radius: 2px;
 
 	&:hover {

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>
 

client/web/src/components/workspace/Panel.vue

@@ -126,7 +126,9 @@
 
 	.panel-body {
 		background: var(--color-3-darkgray);
-		flex-grow: 1;
+		flex: 1 1 100%;
+		display: flex;
+		flex-direction: column;
 	}
 }
 </style>