From 235a30bef474c9d9c912ed2c55ce392fe523f0f6 Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 7 Jun 2021 16:35:10 -0500
Subject: [PATCH] fix: fix margins for select elems

---
 src/pages/observability-packs.js | 85 ++++++++++++++------------------
 1 file changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
index afb268f9a..09d41f005 100644
--- a/src/pages/observability-packs.js
+++ b/src/pages/observability-packs.js
@@ -139,52 +139,39 @@ const ObservabilityPacksPage = ({ data, location }) => {
             }
           `}
         >
-          <div
-            css={css`
-              margin: 0 0.5rem;
-            `}
-          >
-            <FormControl>
-              <Label htmlFor="sortFilter">Sort by</Label>
-              <Select
-                id="sortFilter"
-                value={sortState}
-                onChange={(e) => {
-                  setSortState(e.target.value);
-                }}
-              >
-                {sortOptionValues.map((sortOption) => (
-                  <option key={sortOption} value={sortOption}>
-                    {sortOption}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
-          <div
-            css={css`
-              margin: 0 0.5rem;
-            `}
-          >
-            <FormControl>
-              <Label htmlFor="packContentsFilter">
-                Filter packs containing
-              </Label>
-              <Select
-                id="packContentsFilter"
-                value={containingFilterState}
-                onChange={(e) => {
-                  setContainingFilterState(e.target.value);
-                }}
-              >
-                {packContentsFilterValues.map((packContentsItem) => (
-                  <option key={packContentsItem} value={packContentsItem}>
-                    {packContentsItem}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
+          <FormControl>
+            <Label htmlFor="sortFilter">Sort by</Label>
+            <Select
+              id="sortFilter"
+              value={sortState}
+              onChange={(e) => {
+                setSortState(e.target.value);
+              }}
+            >
+              {sortOptionValues.map((sortOption) => (
+                <option key={sortOption} value={sortOption}>
+                  {sortOption}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl>
+            <Label htmlFor="packContentsFilter">Filter packs containing</Label>
+            <Select
+              id="packContentsFilter"
+              value={containingFilterState}
+              onChange={(e) => {
+                setContainingFilterState(e.target.value);
+              }}
+            >
+              {packContentsFilterValues.map((packContentsItem) => (
+                <option key={packContentsItem} value={packContentsItem}>
+                  {packContentsItem}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
         </div>
         <div>
           <Button variant={Button.VARIANT.PRIMARY}>Grid view</Button>
@@ -274,8 +261,10 @@ Label.propTypes = {
 const FormControl = ({ children }) => (
   <div
     css={css`
-      &:not(:last-child) {
-        margin-bottom: 1.5rem;
+      margin: 0 0.5rem;
+
+      @media screen and (max-width: 1180px) {
+        margin: 0.5rem 0;
       }
     `}
   >