From 003f1e0425a643123725b761837ba0758274006c Mon Sep 17 00:00:00 2001
From: Crystal Ngai <“hokei@users.noreply.github.com”>
Date: Thu, 4 Mar 2021 11:40:56 -0500
Subject: [PATCH] Advanced Search styling and test fixes

---
 jest.config.js                                |   2 +-
 src/__tests__/helpers/browser                 |  40 ----
 src/__tests__/helpers/routing                 |  37 ----
 .../AdvancedSearch/AdvancedSearch.tsx         | 100 +++++-----
 .../AdvancedSearch.test.tsx.snap              | 188 +++++++++---------
 src/components/EditionDetail/Edition.tsx      |   1 -
 .../__snapshots__/FilterYears.test.tsx.snap   | 164 ++++++++-------
 src/components/Work/Work.test.tsx             |   8 +-
 src/util/EditionCardUtils.tsx                 |  16 +-
 styles/components/AdvancedSearch.scss         |  90 ++++-----
 styles/components/Landing.scss                |   2 +-
 styles/main.scss                              |   6 +
 12 files changed, 296 insertions(+), 358 deletions(-)
 delete mode 100644 src/__tests__/helpers/browser
 delete mode 100644 src/__tests__/helpers/routing

diff --git a/jest.config.js b/jest.config.js
index a9fe30ef..b127f85d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,7 +5,7 @@ module.exports = {
   moduleNameMapper: {
     "^~(.*)$": "<rootDir>$1",
   },
-  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
+  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "testUtils"],
   setupFilesAfterEnv: ["./setupTests.js"],
   snapshotSerializers: ["enzyme-to-json/serializer"],
   resetMocks: true,
diff --git a/src/__tests__/helpers/browser b/src/__tests__/helpers/browser
deleted file mode 100644
index 324c5d26..00000000
--- a/src/__tests__/helpers/browser
+++ /dev/null
@@ -1,40 +0,0 @@
-// require.extensions[".svg"] = () => {};
-
-// require("@babel/register")();
-
-// require.extensions[".svg"] = () => {};
-
-// const jsdom = require("jsdom");
-
-// const { JSDOM } = jsdom;
-
-// const virtualConsole = new jsdom.VirtualConsole();
-// const exposedProperties = ["window", "navigator", "document"];
-
-// // @ts-expect-error ts-migrate(2451) FIXME: Cannot redeclare block-scoped variable 'document'.
-// const { document } = new JSDOM("", {
-//   url: "http://localhost",
-//   virtualConsole,
-// }).window;
-// virtualConsole.sendTo(console, { omitJSDOMErrors: true });
-// // @ts-expect-error ts-migrate(2339) FIXME: Property 'document' does not exist on type 'Global... Remove this comment to see the full error message
-// global.document = document;
-// // @ts-expect-error ts-migrate(2339) FIXME: Property 'window' does not exist on type 'Global'.
-// global.window = document.defaultView;
-// // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-// Object.keys(document.defaultView).forEach((property) => {
-//   // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-//   if (typeof global[property] === "undefined") {
-//     exposedProperties.push(property);
-//     // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-//     global[property] = document.defaultView[property];
-//   }
-// });
-
-// // @ts-expect-error ts-migrate(2339) FIXME: Property 'navigator' does not exist on type 'Globa... Remove this comment to see the full error message
-// global.navigator = {
-//   userAgent: "node.js",
-// };
-
-// // @ts-expect-error ts-migrate(2304) FIXME: Cannot find name 'documentRef'.
-// documentRef = document;
diff --git a/src/__tests__/helpers/routing b/src/__tests__/helpers/routing
deleted file mode 100644
index b43c5349..00000000
--- a/src/__tests__/helpers/routing
+++ /dev/null
@@ -1,37 +0,0 @@
-// // @ts-expect-error ts-migrate(2307) FIXME: Cannot find module 'sinon' or its corresponding ty... Remove this comment to see the full error message
-// import { stub } from "sinon";
-// import PropTypes from "prop-types";
-
-// const mockRouter = (push: any) => ({
-//   push,
-//   createHref: stub(),
-//   replace: stub(),
-//   go: stub(),
-//   goBack: stub(),
-//   goForward: stub(),
-//   setRouteLeaveHook: stub(),
-//   isActive: stub(),
-//   location: { location: "default" },
-// });
-
-// const mockRouterContext = (push: any) => ({
-//   router: mockRouter(push || stub()),
-// });
-
-// mockRouter.propTypes = {
-//   push: PropTypes.func,
-//   createHref: PropTypes.func,
-//   replace: PropTypes.func,
-//   go: PropTypes.func,
-//   goBack: PropTypes.func,
-//   goForward: PropTypes.func,
-//   setRouteLeaveHook: PropTypes.func,
-//   isActive: PropTypes.func,
-//   location: PropTypes.objectOf(PropTypes.any),
-// };
-
-// mockRouterContext.propTyps = {
-//   router: PropTypes.func,
-// };
-
-// export { mockRouter, mockRouterContext };
diff --git a/src/components/AdvancedSearch/AdvancedSearch.tsx b/src/components/AdvancedSearch/AdvancedSearch.tsx
index e7372ac1..3bffb281 100644
--- a/src/components/AdvancedSearch/AdvancedSearch.tsx
+++ b/src/components/AdvancedSearch/AdvancedSearch.tsx
@@ -128,25 +128,18 @@ const AdvancedSearch: React.FC<{
   };
 
   return (
-    <main id="mainContent" className="main">
-      <div className="content-header">
+    <main id="mainContent" className="main  advanced-search">
+      <div className="content-top">
         <DS.Breadcrumbs
+          modifiers={["space-under"]}
           breadcrumbs={[{ url: "/", text: breadcrumbTitles.home }]}
         />
       </div>
 
-      <div aria-label="Digital Research Books Beta" className="grid-col-12">
-        <div className="sfr-header-wrapper grid-col-10">
-          <h1 className="nypl-heading">Digital Research Books Beta</h1>
-
-          <div id="tagline">
-            Search the world&apos;s research collections and more for digital
-            books you can use right now
-          </div>
-        </div>
+      <div className="content-primary">
+        <DS.Heading level={1}>Advanced Search</DS.Heading>
 
         <form
-          className="usa-form grid-container width-full margin-x-0 padding-x-0"
           onSubmit={(e) => {
             submit(e);
           }}
@@ -162,31 +155,31 @@ const AdvancedSearch: React.FC<{
             </DS.HelperErrorText>
           )}
           <fieldset>
-            <legend>Advanced Search</legend>
-
-            {inputTerms.map((field: { key: string; label: string }) => {
-              return (
-                <div key={`field-${field.key}`}>
-                  <DS.Label
-                    htmlFor={`${field.key}-input`}
-                    id={`${field.key}-label`}
-                  >
-                    {field.label}
-                  </DS.Label>
-                  <DS.Input
-                    id={`${field.key}-input`}
-                    ariaLabel={`Input for ${field.label}`}
-                    value={
-                      findQueryForField(searchQuery.queries, field.key)
-                        ? findQueryForField(searchQuery.queries, field.key)
-                            .query
-                        : ""
-                    }
-                    onChange={(e) => onQueryChange(e, field.key)}
-                  />
-                </div>
-              );
-            })}
+            <div className="search-fields">
+              {inputTerms.map((field: { key: string; label: string }) => {
+                return (
+                  <div key={`field-${field.key}`}>
+                    <DS.Label
+                      htmlFor={`${field.key}-input`}
+                      id={`${field.key}-label`}
+                    >
+                      {field.label}
+                    </DS.Label>
+                    <DS.Input
+                      id={`${field.key}-input`}
+                      ariaLabel={`Input for ${field.label}`}
+                      value={
+                        findQueryForField(searchQuery.queries, field.key)
+                          ? findQueryForField(searchQuery.queries, field.key)
+                              .query
+                          : ""
+                      }
+                      onChange={(e) => onQueryChange(e, field.key)}
+                    />
+                  </div>
+                );
+              })}
+            </div>
           </fieldset>
           {languages.length > 0 && (
             <LanguageAccordion
@@ -211,21 +204,24 @@ const AdvancedSearch: React.FC<{
               onBookFormatChange(e, format);
             }}
           />
-          <DS.Button
-            id="search-button"
-            buttonType={DS.ButtonTypes.Primary}
-            type="submit"
-          >
-            Search
-          </DS.Button>
-          <DS.Button
-            id="clear-button"
-            buttonType={DS.ButtonTypes.Secondary}
-            type="reset"
-            onClick={() => clearSearch()}
-          >
-            Clear
-          </DS.Button>
+          <hr />
+          <div className="button-container">
+            <DS.Button
+              id="search-button"
+              buttonType={DS.ButtonTypes.Primary}
+              type="submit"
+            >
+              Search
+            </DS.Button>
+            <DS.Button
+              id="clear-button"
+              buttonType={DS.ButtonTypes.Secondary}
+              type="reset"
+              onClick={() => clearSearch()}
+            >
+              Clear
+            </DS.Button>
+          </div>
         </form>
       </div>
     </main>
diff --git a/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.test.tsx.snap b/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.test.tsx.snap
index 46304e4b..224f3b0b 100644
--- a/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.test.tsx.snap
+++ b/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.test.tsx.snap
@@ -78,11 +78,11 @@ Array [
 
 exports[`renders advanced search correctly Renders correctly in when passed well-formed query 1`] = `
 <main
-  className="main"
+  className="main  advanced-search"
   id="mainContent"
 >
   <div
-    className="content-header"
+    className="content-top"
   >
     <Breadcrumbs
       breadcrumbs={
@@ -93,97 +93,92 @@ exports[`renders advanced search correctly Renders correctly in when passed well
           },
         ]
       }
+      modifiers={
+        Array [
+          "space-under",
+        ]
+      }
     />
   </div>
   <div
-    aria-label="Digital Research Books Beta"
-    className="grid-col-12"
+    className="content-primary"
   >
-    <div
-      className="sfr-header-wrapper grid-col-10"
+    <Heading
+      level={1}
     >
-      <h1
-        className="nypl-heading"
-      >
-        Digital Research Books Beta
-      </h1>
-      <div
-        id="tagline"
-      >
-        Search the world's research collections and more for digital books you can use right now
-      </div>
-    </div>
+      Advanced Search
+    </Heading>
     <form
-      className="usa-form grid-container width-full margin-x-0 padding-x-0"
       onSubmit={[Function]}
     >
       <fieldset>
-        <legend>
-          Advanced Search
-        </legend>
         <div
-          key="field-keyword"
+          className="search-fields"
         >
-          <Label
-            htmlFor="keyword-input"
-            id="keyword-label"
+          <div
+            key="field-keyword"
           >
-            Keyword
-          </Label>
-          <Input
-            ariaLabel="Input for Keyword"
-            id="keyword-input"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-        <div
-          key="field-author"
-        >
-          <Label
-            htmlFor="author-input"
-            id="author-label"
+            <Label
+              htmlFor="keyword-input"
+              id="keyword-label"
+            >
+              Keyword
+            </Label>
+            <Input
+              ariaLabel="Input for Keyword"
+              id="keyword-input"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
+          <div
+            key="field-author"
           >
-            Author
-          </Label>
-          <Input
-            ariaLabel="Input for Author"
-            id="author-input"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-        <div
-          key="field-title"
-        >
-          <Label
-            htmlFor="title-input"
-            id="title-label"
+            <Label
+              htmlFor="author-input"
+              id="author-label"
+            >
+              Author
+            </Label>
+            <Input
+              ariaLabel="Input for Author"
+              id="author-input"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
+          <div
+            key="field-title"
           >
-            Title
-          </Label>
-          <Input
-            ariaLabel="Input for Title"
-            id="title-input"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-        <div
-          key="field-subject"
-        >
-          <Label
-            htmlFor="subject-input"
-            id="subject-label"
+            <Label
+              htmlFor="title-input"
+              id="title-label"
+            >
+              Title
+            </Label>
+            <Input
+              ariaLabel="Input for Title"
+              id="title-input"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
+          <div
+            key="field-subject"
           >
-            Subject
-          </Label>
-          <Input
-            ariaLabel="Input for Subject"
-            id="subject-input"
-            onChange={[Function]}
-            value=""
-          />
+            <Label
+              htmlFor="subject-input"
+              id="subject-label"
+            >
+              Subject
+            </Label>
+            <Input
+              ariaLabel="Input for Subject"
+              id="subject-input"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
         </div>
       </fieldset>
       <LanguageAccordion
@@ -216,23 +211,28 @@ exports[`renders advanced search correctly Renders correctly in when passed well
         onFormatChange={[Function]}
         selectedFormats={Array []}
       />
-      <Button
-        buttonType="filled"
-        id="search-button"
-        mouseDown={false}
-        type="submit"
-      >
-        Search
-      </Button>
-      <Button
-        buttonType="outline"
-        id="clear-button"
-        mouseDown={false}
-        onClick={[Function]}
-        type="reset"
+      <hr />
+      <div
+        className="button-container"
       >
-        Clear
-      </Button>
+        <Button
+          buttonType="filled"
+          id="search-button"
+          mouseDown={false}
+          type="submit"
+        >
+          Search
+        </Button>
+        <Button
+          buttonType="outline"
+          id="clear-button"
+          mouseDown={false}
+          onClick={[Function]}
+          type="reset"
+        >
+          Clear
+        </Button>
+      </div>
     </form>
   </div>
 </main>
diff --git a/src/components/EditionDetail/Edition.tsx b/src/components/EditionDetail/Edition.tsx
index 0e250495..7be5a5ad 100644
--- a/src/components/EditionDetail/Edition.tsx
+++ b/src/components/EditionDetail/Edition.tsx
@@ -18,7 +18,6 @@ const Edition: React.FC<{ editionResult: EditionResult }> = (props) => {
   const edition: ApiEdition = props.editionResult.data;
 
   const featuredInstance = edition.instances[0];
-  console.log("edition", edition);
 
   const toggleShowAll = (e: React.ChangeEvent<HTMLInputElement>) => {
     router.push({
diff --git a/src/components/FilterYears/__snapshots__/FilterYears.test.tsx.snap b/src/components/FilterYears/__snapshots__/FilterYears.test.tsx.snap
index b614d1e8..50558ba3 100644
--- a/src/components/FilterYears/__snapshots__/FilterYears.test.tsx.snap
+++ b/src/components/FilterYears/__snapshots__/FilterYears.test.tsx.snap
@@ -1,46 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filter Years with apply button Renders Filter Years with Apply button 1`] = `
-<fieldset>
+<fieldset
+  className="date-range"
+>
   <legend
     className="usa-legend font-sans-lg sub-legend"
   >
     Publication Year
   </legend>
-  <Label
-    htmlFor="date-filter-from"
-    id="date-from-label"
+  <div
+    className="year-input-group"
   >
-    From
-  </Label>
-  <Input
-    id="date-filter-from"
-    onChange={[Function]}
-    type="number"
-    value={30000}
-  />
-  <HelperErrorText
-    isError={false}
-  >
-     EX. 1901 
-  </HelperErrorText>
-  <Label
-    htmlFor="date-filter-to"
-    id="date-to-label"
-  >
-    To
-  </Label>
-  <Input
-    id="date-filter-to"
-    onChange={[Function]}
-    type="number"
-    value={2000}
-  />
-  <HelperErrorText
-    isError={false}
-  >
-     EX. 2000 
-  </HelperErrorText>
+    <div
+      className="year-input"
+    >
+      <Label
+        htmlFor="date-filter-from"
+        id="date-from-label"
+      >
+        From
+      </Label>
+      <Input
+        id="date-filter-from"
+        onChange={[Function]}
+        type="number"
+        value={30000}
+      />
+      <HelperErrorText
+        isError={false}
+      >
+         EX. 1901 
+      </HelperErrorText>
+    </div>
+    <div
+      className="year-input"
+    >
+      <Label
+        htmlFor="date-filter-to"
+        id="date-to-label"
+      >
+        To
+      </Label>
+      <Input
+        id="date-filter-to"
+        onChange={[Function]}
+        type="number"
+        value={2000}
+      />
+      <HelperErrorText
+        isError={false}
+      >
+         EX. 2000 
+      </HelperErrorText>
+    </div>
+  </div>
   <Button
     id="year-filter-button"
     mouseDown={false}
@@ -53,45 +67,59 @@ exports[`Filter Years with apply button Renders Filter Years with Apply button 1
 `;
 
 exports[`Filter Years with no apply button Renders filter years input 1`] = `
-<fieldset>
+<fieldset
+  className="date-range"
+>
   <legend
     className="usa-legend font-sans-lg sub-legend"
   >
     Publication Year
   </legend>
-  <Label
-    htmlFor="date-filter-from"
-    id="date-from-label"
-  >
-    From
-  </Label>
-  <Input
-    id="date-filter-from"
-    onChange={[Function]}
-    type="number"
-    value={2000}
-  />
-  <HelperErrorText
-    isError={false}
-  >
-     EX. 1901 
-  </HelperErrorText>
-  <Label
-    htmlFor="date-filter-to"
-    id="date-to-label"
-  >
-    To
-  </Label>
-  <Input
-    id="date-filter-to"
-    onChange={[Function]}
-    type="number"
-    value={3000}
-  />
-  <HelperErrorText
-    isError={false}
+  <div
+    className="year-input-group"
   >
-     EX. 2000 
-  </HelperErrorText>
+    <div
+      className="year-input"
+    >
+      <Label
+        htmlFor="date-filter-from"
+        id="date-from-label"
+      >
+        From
+      </Label>
+      <Input
+        id="date-filter-from"
+        onChange={[Function]}
+        type="number"
+        value={2000}
+      />
+      <HelperErrorText
+        isError={false}
+      >
+         EX. 1901 
+      </HelperErrorText>
+    </div>
+    <div
+      className="year-input"
+    >
+      <Label
+        htmlFor="date-filter-to"
+        id="date-to-label"
+      >
+        To
+      </Label>
+      <Input
+        id="date-filter-to"
+        onChange={[Function]}
+        type="number"
+        value={3000}
+      />
+      <HelperErrorText
+        isError={false}
+      >
+         EX. 2000 
+      </HelperErrorText>
+    </div>
+  </div>
 </fieldset>
 `;
diff --git a/src/components/Work/Work.test.tsx b/src/components/Work/Work.test.tsx
index 4e4fb238..d60974d5 100644
--- a/src/components/Work/Work.test.tsx
+++ b/src/components/Work/Work.test.tsx
@@ -109,13 +109,13 @@ describe("All Editions Toggle", () => {
       );
     });
 
-    test("Edition Toggle defaults to empty", () => {
+    test("Edition Toggle defaults to checked", () => {
       const toggle = screen.getByLabelText(
         "Show only items currently available online"
       ) as HTMLInputElement;
       expect(toggle).toBeInTheDocument;
-      expect(toggle.getAttribute("aria-checked")).toBe("false");
-      expect(toggle).not.toHaveAttribute("checked");
+      expect(toggle.getAttribute("aria-checked")).toBe("true");
+      expect(toggle).toHaveAttribute("checked");
     });
     test("clicking the edition toggle sends a new query", () => {
       const toggle = screen.getByLabelText(
@@ -126,7 +126,7 @@ describe("All Editions Toggle", () => {
       expect(mockPush).toHaveBeenCalledTimes(1);
       expect(mockPush).toHaveBeenCalledWith({
         pathname: "",
-        query: { showAll: false },
+        query: { showAll: true },
       });
     });
   });
diff --git a/src/util/EditionCardUtils.tsx b/src/util/EditionCardUtils.tsx
index 50c692da..a86426db 100644
--- a/src/util/EditionCardUtils.tsx
+++ b/src/util/EditionCardUtils.tsx
@@ -128,23 +128,24 @@ export default class EditionCardUtils {
     return agents.map((authorAgent: Agent, i: number) => {
       const authorLinkText = authorAgent.name;
       return (
-        <>
+        <React.Fragment
+          key={
+            authorAgent.viaf
+              ? `${linkKeyPrefix}-${authorAgent.viaf}`
+              : `${linkKeyPrefix}-${authorAgent.name}`
+          }
+        >
           <Link
             to={{
               pathname: "/search",
               query: EditionCardUtils.getLinkToAuthorSearch(authorAgent),
             }}
             className="link"
-            key={
-              authorAgent.viaf
-                ? `${linkKeyPrefix}-${authorAgent.viaf}`
-                : `${linkKeyPrefix}-${authorAgent.name}`
-            }
           >
             {authorLinkText}
           </Link>
           {i < agents.length && ", "}
-        </>
+        </React.Fragment>
       );
     });
   }
@@ -235,7 +236,6 @@ export default class EditionCardUtils {
   static getReadOnlineLink = (editionId: number, item: Item) => {
     const getEmbeddedReadLink = (item: Item) => {
       if (!item || !item.links) return undefined;
-      console.log("links", item.links);
       const selectedLink = item.links.find(
         (link: ItemLink) => !link.local && !link.download
       );
diff --git a/styles/components/AdvancedSearch.scss b/styles/components/AdvancedSearch.scss
index e3388c8a..318027b1 100644
--- a/styles/components/AdvancedSearch.scss
+++ b/styles/components/AdvancedSearch.scss
@@ -1,55 +1,41 @@
-.sub-legend {
-  font-size: 1rem;
-  text-transform: uppercase;
-  font-weight: normal;
-  border-bottom: 1px solid black;
-  display: block;
-  width: 100%;
-  line-height: 2rem;
-}
+.advanced-search {
+    .search-fields {
+        display: flex;
+        flex-direction: column;
 
-.nypl-select__menu {
-  @media (min-width: 40em) {
-    margin-right: 1rem;
-  }
-  @media (min-width: 64em) {
-    margin-right: 2rem;
-  }
-}
-.nypl-select {
-  @media (min-width: 40em) {
-    margin-right: 1rem;
-  }
-  @media (min-width: 64em) {
-    margin-right: 2rem;
-  }
-}
-.nypl-select__multi-value {
-  border: 1px dashed #7fb4dc;
-}
+        @media (min-width: $breakpoint-medium) {
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            div {
+                flex: 0 1 48%;
+            }
+        }
+    }
+
+    hr { 
+        @include space-stack-m;
+    }
+
+    .button-container {
+        @include space-stack-m;
+        display: flex;
+        width: 100%;
 
-.tag-button {
-  color: black;
-  box-shadow: inset 0 0 0 1px #000;
-  border-radius: 0;
-  position: relative;
-  padding-right: 1.5rem;
-  cursor: auto;
-  &.active {
-    cursor: pointer;
-    &:after {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      font-size: 0.7rem;
-      content: 'x';
-      padding: 0.5rem 0.5rem;
+        @media (min-width: $breakpoint-medium) {
+            justify-content: flex-end;
+        }
+        button { 
+            flex: 1;
+            
+            @media (min-width: $breakpoint-medium) {
+                flex: initial;
+                width: 150px;
+            }
+    
+        }
+        button:not(:last-child) {
+            margin-right: 1em;
+        }
     }
-  }
-}
-@media (min-width: 30em) {
-  .usa-form .usa-button {
-    margin-top: 0.5rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/styles/components/Landing.scss b/styles/components/Landing.scss
index c7c01b9f..3066b9a9 100644
--- a/styles/components/Landing.scss
+++ b/styles/components/Landing.scss
@@ -13,7 +13,7 @@
     display: flex;
     flex-direction: column;
 
-    @media screen and (max-width: $breakpoint-small) {
+    @media (max-width: $breakpoint-small) {
         color: red;
         flex-direction: row;
     }
diff --git a/styles/main.scss b/styles/main.scss
index b5faf370..bc6121d8 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -79,6 +79,12 @@ body {
   }
 }
 
+.breadcrumbs {
+  &--space-under {
+    @include space-stack-s;
+  }
+}
+
 fieldset {
   border: none;
 }
\ No newline at end of file