Position legend beneath dropdowns on small screens and fix width of legend
@@ -351,8 +351,14 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
.quantilePlot {
margin: 20px;
+ .rv-discrete-color-legend {
+ width: max-content;
+ max-width: 50vw;
+ }
+
.rv-discrete-color-legend-item.clickable {
padding: 3px 10px;
+ white-space: normal;
&:hover {
background: $hover-color;
@@ -616,3 +622,29 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
.ReactTable {
border: none !important;
}
+
+@media only screen and (max-width: 700px) {
+ .quantilePlot {
+ .settings-legend-container {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .settings-container {
+ margin-right: 0;
+ }
+
+ .rv-discrete-color-legend {
+ margin: 1em 0;
+ }
+
+ .settings-subcontainer,
+ .settings-border-container {
+ justify-content: center;
+ }
+
+ .rv-discrete-color-legend {
+ max-width: 95vw;
+ }
+ }
+}
