diff --git a/src/routes/Discover/PickerMenu/PickerMenu.js b/src/routes/Discover/PickerMenu/PickerMenu.js
index 0c48c117b..df4bf6678 100644
--- a/src/routes/Discover/PickerMenu/PickerMenu.js
+++ b/src/routes/Discover/PickerMenu/PickerMenu.js
@@ -23,12 +23,12 @@ const PickerMenu = ({ className, name = '', value = '', options = [], onSelect }
onCloseRequest={closeMenu}
renderLabel={(ref) => (
)}
renderMenu={() => (
-
+
{
Array.isArray(options) ?
options.map(({ label, value }) => (
diff --git a/src/routes/Discover/PickerMenu/styles.less b/src/routes/Discover/PickerMenu/styles.less
index ff423cf40..8bdbf296d 100644
--- a/src/routes/Discover/PickerMenu/styles.less
+++ b/src/routes/Discover/PickerMenu/styles.less
@@ -13,7 +13,7 @@
&.active {
background-color: var(--color-surfacelight);
- .label {
+ .picker-label {
color: var(--color-backgrounddarker);
}
@@ -22,7 +22,7 @@
}
}
- .label {
+ .picker-label {
flex: 1;
font-size: 1.1rem;
max-height: 2.4em;
@@ -39,8 +39,7 @@
}
}
-.discover-picker-menu-container {
- width: 100%;
+.picker-menu-container {
background-color: var(--color-backgroundlighter);
.picker-option-container {
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 12c61e28e..94d6bfe94 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -17,23 +17,21 @@
align-self: stretch;
display: grid;
grid-template-columns: 1fr 26rem;
- grid-template-rows: fit-content(13rem) 1fr;
+ grid-template-rows: fit-content(15rem) 1fr;
grid-template-areas:
"pickers-area meta-preview-area"
"meta-items-area meta-preview-area";
.pickers-container {
grid-area: pickers-area;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- padding: 0.7rem;
+ display: grid;
+ grid-gap: 1rem;
+ margin: 2rem 0;
+ padding: 0 2rem;
overflow-y: auto;
.picker {
- flex-basis: 17rem;
height: 3rem;
- margin: 0.7rem;
}
}
@@ -41,16 +39,12 @@
grid-area: meta-items-area;
display: grid;
grid-auto-rows: max-content;
- grid-gap: 1.4rem;
+ grid-gap: 1.5rem;
align-items: center;
- padding: 0 1.4rem;
+ padding: 0 2rem;
overflow-y: auto;
.meta-item {
- &:hover, &:focus, &:global(.active) {
- outline-offset: calc(-1 * var(--focus-outline-size));
- }
-
&.selected {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-1.5 * var(--focus-outline-size));
@@ -68,6 +62,10 @@
@media only screen and (min-width: @xxlarge) {
.discover-container {
.discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(auto-fill, 17rem);
+ }
+
.meta-items-container {
grid-template-columns: repeat(8, auto);
}
@@ -78,6 +76,10 @@
@media only screen and (max-width: @xxlarge) {
.discover-container {
.discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(6, 1fr);
+ }
+
.meta-items-container {
grid-template-columns: repeat(7, auto);
}
@@ -88,6 +90,10 @@
@media only screen and (max-width: @normal) {
.discover-container {
.discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(5, 1fr);
+ }
+
.meta-items-container {
grid-template-columns: repeat(6, auto);
}
@@ -98,6 +104,10 @@
@media only screen and (max-width: @medium) {
.discover-container {
.discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
.meta-items-container {
grid-template-columns: repeat(5, auto);
}
@@ -108,6 +118,10 @@
@media only screen and (max-width: @small) {
.discover-container {
.discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
.meta-items-container {
grid-template-columns: repeat(4, auto);
}
@@ -124,6 +138,10 @@
"pickers-area"
"meta-items-area";
+ .pickers-container {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
.meta-items-container {
grid-template-columns: repeat(5, auto);
}
@@ -133,4 +151,15 @@
}
}
}
+}
+
+
+@media only screen and (max-width: @minimum) {
+ .discover-container {
+ .discover-content {
+ .pickers-container {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+ }
}
\ No newline at end of file