From a3b679e64dd93d0e2d0b84af16cb74f3a77a02bb Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Tue, 8 Jun 2021 00:54:24 -0700
Subject: [PATCH] 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 |  7 ++++--
 .../web/src/components/panels/LayerTree.vue   |  1 +
 .../web/src/components/widgets/ShelfItem.vue  |  1 +
 .../web/src/components/window/MainWindow.vue  |  3 +--
 .../window/status-bar/StatusBar.vue           | 24 +++++++++----------
 client/web/src/components/workspace/Panel.vue |  4 +++-
 6 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 0551b9bfe..6df9743d5 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/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 {
diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 50e57cfb2..40b612012 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/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;
 
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue
index a0308d1de..670adb27c 100644
--- a/client/web/src/components/widgets/ShelfItem.vue
+++ b/client/web/src/components/widgets/ShelfItem.vue
@@ -6,6 +6,7 @@
 
 <style lang="scss">
 .shelf-item {
+	flex: 0 0 auto;
 	border-radius: 2px;
 
 	&:hover {
diff --git a/client/web/src/components/window/MainWindow.vue b/client/web/src/components/window/MainWindow.vue
index 766e8471b..23a45d777 100644
--- a/client/web/src/components/window/MainWindow.vue
+++ b/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>
diff --git a/client/web/src/components/window/status-bar/StatusBar.vue b/client/web/src/components/window/status-bar/StatusBar.vue
index 35e3319be..4ee619983 100644
--- a/client/web/src/components/window/status-bar/StatusBar.vue
+++ b/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>
 
diff --git a/client/web/src/components/workspace/Panel.vue b/client/web/src/components/workspace/Panel.vue
index 544dba304..654611d4e 100644
--- a/client/web/src/components/workspace/Panel.vue
+++ b/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>