diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 620931749..f3c11713a 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -19,6 +19,7 @@ const Addons = ({ urlParams }) => {
{dropdowns.map((dropdown) => (
))}
+
{addons.map((addon) => (
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 9426efe74..1e9edc91a 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -19,26 +19,14 @@
flex-direction: row;
margin: 2rem;
- .dropdown, .add-button-container {
- flex-grow: 0;
- flex-shrink: 1;
- height: 3rem;
-
- &:not(:last-child) {
- margin-right: 1rem;
- }
- }
-
- .dropdown {
- flex-basis: 15rem;
- }
-
.add-button-container {
- flex-basis: auto;
+ flex: none;
display: flex;
flex-direction: row;
align-items: center;
+ height: 3rem;
max-width: 15rem;
+ margin-right: 1rem;
padding: 0 1rem;
background-color: var(--color-signal5);
@@ -55,12 +43,29 @@
}
.add-button-label {
- flex: 1;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
color: var(--color-surfacelighter);
}
}
+
+ .dropdown {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: 15rem;
+ height: 3rem;
+ margin-right: 1rem;
+ }
+
+ .search-bar-container {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: 19rem;
+ height: 3rem;
+ }
}
.addons-list-container {