From 741a7129723504cdaf3885d54e553a7c4e916fa1 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 13 Jun 2021 12:29:50 -0700
Subject: [PATCH] Fix Layer Tree panel CSS to allow scrolling (#208)

---
 .../web/src/components/panels/LayerTree.vue   | 65 ++++++++++---------
 client/web/src/components/workspace/Panel.vue |  1 +
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 03e129cb9..b3d09a9de 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -44,6 +44,8 @@
 
 <style lang="scss">
 .layer-tree-panel {
+	min-height: 0;
+
 	.options-bar {
 		height: 32px;
 		flex: 0 0 auto;
@@ -59,39 +61,44 @@
 		}
 	}
 
-	.layer-row {
-		display: flex;
-		height: 36px;
-		align-items: center;
-		margin: 0 8px;
+	.layer-tree {
+		overflow: auto;
 
-		.layer {
+		.layer-row {
 			display: flex;
+			height: 36px;
 			align-items: center;
-			background: var(--color-5-dullgray);
-			border-radius: 4px;
-			width: 100%;
-			height: 100%;
-			margin-left: 4px;
-			padding-left: 16px;
-		}
-		.selected {
-			background: var(--color-accent);
-			color: var(--color-f-white);
-		}
-
-		& + .layer-row {
-			margin-top: 2px;
-		}
-
-		.layer-thumbnail {
-			width: 64px;
-			height: 100%;
-			background: white;
-		}
-
-		.layer-type-icon {
 			margin: 0 8px;
+			flex: 0 0 auto;
+
+			.layer {
+				display: flex;
+				align-items: center;
+				background: var(--color-5-dullgray);
+				border-radius: 4px;
+				width: 100%;
+				height: 100%;
+				margin-left: 4px;
+				padding-left: 16px;
+			}
+			.selected {
+				background: var(--color-accent);
+				color: var(--color-f-white);
+			}
+
+			& + .layer-row {
+				margin-top: 2px;
+			}
+
+			.layer-thumbnail {
+				width: 64px;
+				height: 100%;
+				background: white;
+			}
+
+			.layer-type-icon {
+				margin: 0 8px;
+			}
 		}
 	}
 }
diff --git a/client/web/src/components/workspace/Panel.vue b/client/web/src/components/workspace/Panel.vue
index 654611d4e..acf42993e 100644
--- a/client/web/src/components/workspace/Panel.vue
+++ b/client/web/src/components/workspace/Panel.vue
@@ -129,6 +129,7 @@
 		flex: 1 1 100%;
 		display: flex;
 		flex-direction: column;
+		min-height: 0;
 	}
 }
 </style>