From 03f6667d9e83e42e6a9c7587198be60220900b05 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 18 Mar 2019 20:04:00 +0000
Subject: [PATCH] Add media queries to fix overlap at smaller heights

---
 app/src/frontend/legend.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/src/frontend/legend.css b/app/src/frontend/legend.css
index bbdb5b4c..15f5173b 100644
--- a/app/src/frontend/legend.css
+++ b/app/src/frontend/legend.css
@@ -33,11 +33,30 @@
     margin: 0.25rem 0 0.5rem;
 }
 .data-legend {
-    max-height: 50vh;
+    max-height: 80px;
+    max-height: 20vh;
     overflow-y: auto;
     list-style: none;
     margin-bottom: 0;
 }
+@media (min-height: 470px) {
+    .data-legend {
+        max-height: 150px;
+        max-height: 30vh;
+    }
+}
+@media (min-height: 550px) {
+    .data-legend {
+        max-height: 220px;
+        max-height: 40vh;
+    }
+}
+@media (min-height: 670px) {
+    .data-legend {
+        max-height: 330px;
+        max-height: 50vh;
+    }
+}
 .data-legend .key {
     display: inline-block;
     width: 1.3rem;