Make responsive (#8)

* Refactor ModResult to use CSS Grid

* Mobile support for ModResult

* Mobile navbar

* Mobile fixes, get rid of x overflow

* Mobile filter support

* Fully responsive

* Collapse categories view later

* Mobile-first

* Fix version selector width

assets/styles/layout.scss

@@ -1,7 +1,7 @@
 .columns {
   display: flex;
 
-  @for $i from 1 through 4 {
+  @for $i from 1 through 5 {
     .column-grow-#{$i} {
       flex-grow: $i;
     }

components/ModResult.vue

@@ -1,106 +1,104 @@
 <template>
   <div class="result rows">
     <img class="result-icon" :src="iconUrl" />
-    <div class="column-grow-3">
+    <div class="rows result-name-author">
-      <div class="rows column-grow-2">
+      <h2 class="mod-name">
-        <h2 class="mod-name">
+        <a :href="pageUrl">{{ name }}</a>
-          <a :href="pageUrl">{{ name }}</a>
+      </h2>
-        </h2>
+      <p class="author">
-        <p class="author">
+        by <a :href="authorUrl">{{ author }}</a>
-          by <a :href="authorUrl">{{ author }}</a>
-        </p>
-      </div>
-      <p class="column-grow-1">
-        {{ description }}
       </p>
-      <div class="column-grow-1 columns result-infos">
+    </div>
-        <div class="result-image columns">
+    <p class="result-summary">
-          <svg
+      {{ description }}
-            width="20"
+    </p>
-            height="20"
+    <div class="column-grow-1 columns result-infos">
-            viewBox="0 0 24 24"
+      <div class="result-image columns">
-            fill="none"
+        <svg
-            stroke="#3cdb36"
+          width="20"
-            stroke-width="2"
+          height="20"
-            stroke-linecap="round"
+          viewBox="0 0 24 24"
-            stroke-linejoin="round"
+          fill="none"
-          >
+          stroke="#3cdb36"
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+          stroke-width="2"
-            <polyline points="7 10 12 15 17 10"></polyline>
+          stroke-linecap="round"
-            <line x1="12" y1="15" x2="12" y2="3"></line>
+          stroke-linejoin="round"
-          </svg>
+        >
-          <p>{{ downloads }}</p>
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-        </div>
+          <polyline points="7 10 12 15 17 10"></polyline>
-        <div class="result-image columns">
+          <line x1="12" y1="15" x2="12" y2="3"></line>
-          <svg viewBox="0 0 16 16" fill="#099fef">
+        </svg>
-            <path
+        <p>{{ downloads }}</p>
-              fill-rule="evenodd"
+      </div>
-              d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
+      <div class="result-image columns">
-            />
+        <svg viewBox="0 0 16 16" fill="#099fef">
-            <path
+          <path
-              fill-rule="evenodd"
+            fill-rule="evenodd"
-              d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"
+            d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
-            />
-            <path
-              fill-rule="evenodd"
-              d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
-            />
-          </svg>
-          <p>{{ createdAt }}</p>
-        </div>
-        <div class="result-image columns">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#e88d0d"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path
-              d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
-            ></path>
-            <path
-              d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
-            ></path>
-          </svg>
-          <p>{{ updatedAt }}</p>
-        </div>
-        <div class="result-image columns">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#e8200d"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path
-              d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
-            ></path>
-            <line x1="7" y1="7" x2="7.01" y2="7"></line>
-          </svg>
-          <p>{{ latestVersion }}</p>
-        </div>
-
-        <div class="loaders columns">
-          <img
-            v-if="categories.includes('fabric')"
-            src="https://fabricmc.net/assets/logo.png"
-            alt="fabric"
           />
+          <path
+            fill-rule="evenodd"
+            d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"
+          />
+          <path
+            fill-rule="evenodd"
+            d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
+          />
+        </svg>
+        <p>{{ createdAt }}</p>
+      </div>
+      <div class="result-image columns">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#e88d0d"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+          ></path>
+          <path
+            d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+          ></path>
+        </svg>
+        <p>{{ updatedAt }}</p>
+      </div>
+      <div class="result-image columns">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#e8200d"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
+          ></path>
+          <line x1="7" y1="7" x2="7.01" y2="7"></line>
+        </svg>
+        <p>{{ latestVersion }}</p>
+      </div>
 
-          <svg v-if="categories.includes('forge')" viewBox="0 0 90 46">
+      <div class="loaders columns">
-            <defs>
+        <img
-              <path
+          v-if="categories.includes('fabric')"
-                id="a"
+          src="https://fabricmc.net/assets/logo.png"
-                fill="#1e2d44"
+          alt="fabric"
-                d="M85.8 49.1l-4.5-5.5q-1.65-.1-3.55-.55-3.8-.95-4.85-2.65Q68.75 34.25 74 27q5.45-7.65 17.55-10.3l-37.8-1.9H100v-3.7H47.75v14q0 .65-1.9-11.7h-4.1v13l-1.9-12.3h-27.9q12.85 10.8 19.9 14.3 2.45 1.2 6.05 1.65 2.1.25 6.35.35 2.1.1 3.1.35 1.65.4 2.7 1.45 1.75 1.7 2 4 .3 2.4-1.2 4.3-1.2 1.65-4.35 2.6l-2.95.6L39 49.1v6.4h10.25l.3-6.3 8.95-6.3q-2.85 2.4-6.25 7.7-.95 1.5-1.7 3.5 1.7-1.45 4.9-2.3 3.3-.9 7.3-.9 3.9 0 7.2.9 3.25.85 4.95 2.3-.6-1.75-1.7-3.5-3.4-5.2-6.2-7.7l8.9 6.3.3 6.3h9.6v-6.4z"
+        />
-              />
+
-            </defs>
+        <svg v-if="categories.includes('forge')" viewBox="0 0 90 46">
-            <use transform="translate(-10.95 -10.3)" xlink:href="#a" />
+          <defs>
-          </svg>
+            <path
-        </div>
+              id="a"
+              fill="#1e2d44"
+              d="M85.8 49.1l-4.5-5.5q-1.65-.1-3.55-.55-3.8-.95-4.85-2.65Q68.75 34.25 74 27q5.45-7.65 17.55-10.3l-37.8-1.9H100v-3.7H47.75v14q0 .65-1.9-11.7h-4.1v13l-1.9-12.3h-27.9q12.85 10.8 19.9 14.3 2.45 1.2 6.05 1.65 2.1.25 6.35.35 2.1.1 3.1.35 1.65.4 2.7 1.45 1.75 1.7 2 4 .3 2.4-1.2 4.3-1.2 1.65-4.35 2.6l-2.95.6L39 49.1v6.4h10.25l.3-6.3 8.95-6.3q-2.85 2.4-6.25 7.7-.95 1.5-1.7 3.5 1.7-1.45 4.9-2.3 3.3-.9 7.3-.9 3.9 0 7.2.9 3.25.85 4.95 2.3-.6-1.75-1.7-3.5-3.4-5.2-6.2-7.7l8.9 6.3.3 6.3h9.6v-6.4z"
+            />
+          </defs>
+          <use transform="translate(-10.95 -10.3)" xlink:href="#a" />
+        </svg>
       </div>
     </div>
     <div class="categories">
@@ -375,10 +373,18 @@ export default {
 }
 
 .result {
-  align-items: center;
+  display: grid;
+  grid-template-columns: 80px auto;
+  grid-template-rows: auto auto auto 30px;
+  max-width: 100vw;
   margin-bottom: 10px;
   background: var(--color-bg);
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
+
+  // Columns are larger to accomodate larger screens
+  @media screen and (min-width: 1375px) {
+    grid-template-columns: 120px auto;
+  }
 }
 
 .result * {
@@ -388,26 +394,80 @@ export default {
 }
 
 .result-icon {
-  width: 90px;
+  width: 60px;
-  height: 90px;
+  height: 60px;
-  margin: 10px 20px 10px 10px !important;
+  margin: 5px !important;
   border-radius: 0.5rem;
+  grid-row-start: 1;
+  grid-row-end: 4;
+  grid-column-start: 1;
+
+  @media screen and (min-width: 900px) {
+    margin: 10px 20px 10px 10px !important;
+    width: 70px;
+    height: 70px;
+  }
+
+  // Larger screen, larger icon
+  @media screen and (min-width: 1375px) {
+    width: 90px;
+    height: 90px;
+  }
+}
+
+.result-name-author {
+  display: block;
+  margin-top: 10px;
+  min-height: 38px;
+}
+
+.result-summary {
+  grid-row: 2;
+  grid-column: 2;
+  max-height: 150px;
+  font-size: 11pt;
 }
 
 .mod-name {
   align-self: flex-end;
+  font-size: 13pt;
 }
 
 .author {
-  margin-left: 5px;
   margin-bottom: 2px !important;
   align-self: flex-end;
+  font-size: 12pt;
 }
 
 .result-infos {
-  margin-top: 5px !important;
+  display: grid;
+  grid-template-columns: 115px 115px auto;
+  grid-template-rows: 20px 20px;
+  margin-top: 5px;
+  grid-column: 2;
   align-self: flex-end;
-  align-items: center;
+  align-items: flex-start;
+  align-self: flex-start;
+
+  .columns:nth-child(2) {
+    grid-column: 1;
+  }
+
+  .columns:nth-child(3) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .result-image {
+    p {
+      font-size: 10pt;
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
 }
 
 .result-image svg {
@@ -426,7 +486,9 @@ export default {
 .categories {
   display: flex;
   flex-direction: row;
-  margin: auto 20px 20px auto;
+  margin: 0 0 5px 0;
+  grid-column: 1;
+  margin-bottom: auto;
 }
 
 .categories p {
@@ -447,6 +509,8 @@ export default {
 
 .loaders {
   align-items: center;
+  grid-column: 1;
+  grid-row: 3;
   img {
     width: 15px;
   }
@@ -457,4 +521,83 @@ export default {
     margin-left: 5px;
   }
 }
+
+// Larger tablet-sized screens
+@media screen and (min-width: 900px) {
+  .result {
+    grid-template-columns: 90px auto;
+    grid-template-rows: auto auto 30px;
+  }
+
+  .result-infos {
+    display: flex;
+    align-items: center;
+    margin-top: 0;
+    .result-image {
+      p {
+        font-size: 15px;
+      }
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  .loaders {
+    svg {
+      width: 20px;
+    }
+  }
+
+  .categories {
+    margin: 0 0 10px 0;
+  }
+
+  .result-name-author {
+    display: flex;
+    margin-top: 0;
+    .author {
+      margin-left: 5px;
+    }
+  }
+
+  .mod-name {
+    font-size: 16pt;
+  }
+
+  .result-summary {
+    max-height: 100px;
+    font-size: 13pt;
+  }
+}
+
+// Larger screens
+@media screen and (min-width: 1375px) {
+  .result {
+    margin: 5px 0 5px 15px;
+    grid-column: 1;
+    grid-template-columns: 110px auto;
+  }
+
+  .categories {
+    margin: auto 0 5px auto;
+    grid-row: 3;
+    grid-column: 3;
+  }
+
+  .mod-name {
+    font-size: 18pt;
+  }
+}
+
+// Desktop
+@media screen and (min-width: 1500px) {
+  .result-name-author {
+    display: flex;
+    min-height: 38px;
+    grid-column: 2;
+  }
+}
 </style>

layouts/default.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="layout">
     <aside>
+      <input
+        class="hamburger-button"
+        alt="Open navigation menu"
+        type="checkbox"
+        @click="toggleNavMenu()"
+      />
+      <!-- TODO: Probably shouldn't be a Unicode symbol -->
+      <div class="hamburger-icon">☰</div>
       <div class="logo-wrapper">
         <img class="logo" src="~/assets/images/logo.svg" />
         <span class="name">modrinth</span>
@@ -223,6 +231,10 @@ export default {
       localStorage.setItem('data-theme', theme)
       document.documentElement.setAttribute('data-theme', theme)
     },
+    toggleNavMenu() {
+      document.body.style.overflow =
+        document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+    },
   },
 }
 </script>
@@ -230,30 +242,37 @@ export default {
 <style lang="scss">
 .layout {
   display: flex;
+  flex-flow: column;
   min-height: 100vh;
   width: 100%;
 
+  // Desktop
+  @media screen and (min-width: 1145px) {
+    flex-flow: row;
+  }
+
   aside {
     top: 0;
-    position: -webkit-sticky;
     position: sticky;
-    max-height: 100vh;
+    border-right: 0;
-    border-right: 1px solid var(--color-grey-2);
     display: flex; // Flex here to safely expand navigation height
     flex-direction: column;
-    max-width: 15%;
+    width: 100vw;
-    min-width: 15%;
+    max-height: 100vh;
+    background: var(--color-bg);
+    z-index: 10;
 
     .logo-wrapper {
       align-items: center;
       display: flex;
       height: 3.5rem;
-      padding: 0 1.5rem;
+      width: 100vw;
       font-family: 'Montserrat', sans-serif;
 
       .logo {
         height: 2rem;
         width: auto;
+        margin-left: 2.5rem;
       }
 
       .name {
@@ -263,14 +282,53 @@ export default {
       }
     }
 
+    .hamburger-button {
+      position: absolute;
+      display: block;
+      left: 10px;
+      opacity: 0;
+      margin: 0;
+      top: 1.2rem;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+
+    .hamburger-icon {
+      display: block;
+      position: absolute;
+      left: 15px;
+      top: 1.2rem;
+      pointer-events: none;
+    }
+
+    .hamburger-button:checked ~ nav {
+      left: 0;
+    }
+
     nav {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
       justify-content: space-between;
+      position: absolute;
+      height: calc(100vh - 3.5rem);
+      width: 100vw;
+      left: -100vw;
+      top: 3.5rem;
+      transition: left 150ms;
+      background: var(--color-bg);
+      overflow-y: auto;
+      z-index: 10;
+
+      // Larger screens that still need a collapsed menu
+      @media screen and (min-width: 900px) {
+        width: 300px;
+        left: -300px;
+      }
 
       & > * {
-        padding: 0 1.5rem;
+        padding: 0 0.75rem;
       }
 
       .links {
@@ -285,7 +343,6 @@ export default {
 
         section {
           border-left: 4px solid var(--color-grey-3);
-          margin-left: 0.5rem;
 
           a {
             align-items: center;
@@ -309,6 +366,7 @@ export default {
             svg {
               height: 1rem;
               width: 1rem;
+              flex-shrink: 0;
             }
 
             span {
@@ -350,6 +408,33 @@ export default {
         }
       }
     }
+
+    // Desktop
+    @media screen and (min-width: 1145px) {
+      border-right: 1px solid var(--color-grey-2);
+      max-width: 270px;
+
+      nav {
+        height: 100%;
+        left: 0;
+        width: 100%;
+        transition: none;
+        position: static;
+      }
+
+      .logo-wrapper {
+        padding: 0 0 0 1.5rem;
+        width: 100%;
+        .logo {
+          margin: 0;
+        }
+      }
+
+      .hamburger-button,
+      .hamburger-icon {
+        display: none;
+      }
+    }
   }
   main {
     background-color: var(--color-grey-0);
@@ -399,7 +484,18 @@ export default {
     }
 
     .content {
-      padding: 1rem 3rem 1rem 2rem;
+      // Default is for small phone sizes (like iPhone 5/SE)
+      padding: 0.5rem 0.35rem 0.5rem 0.35rem;
+
+      // Larger phones
+      @media screen and (min-width: 500px) {
+        padding: 1rem 0.5rem 1rem 0.5rem;
+      }
+
+      // Desktop
+      @media screen and (min-width: 1145px) {
+        padding: 1rem;
+      }
     }
   }
 }
@@ -413,4 +509,12 @@ export default {
     text-decoration: var(--color-grey-2) underline;
   }
 }
+
+// Hack for very small (iPhone 5/SE) sized phones
+// an x overflow existed and I was unable to figure out why
+@media screen and (max-width: 360px) {
+  body {
+    overflow-x: hidden !important;
+  }
+}
 </style>

pages/mods.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-    <div class="content column-grow-4">
+    <div class="content column-grow-5">
       <h2>Mods</h2>
       <section class="search-bar">
         <div class="iconified-input column-grow-2">
@@ -24,24 +24,29 @@
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
         </div>
-        <div class="iconified-select">
+        <div class="sort-paginate">
-          <select id="sort-type" @input="changeSortType">
+          <div class="iconified-select">
-            <option value="relevance" selected>Relevance</option>
+            <select id="sort-type" @input="changeSortType">
-            <option value="downloads">Total Downloads</option>
+              <option value="relevance" selected>Relevance</option>
-            <option value="newest">Newest</option>
+              <option value="downloads">Total Downloads</option>
-            <option value="updated">Updated</option>
+              <option value="newest">Newest</option>
-          </select>
+              <option value="updated">Updated</option>
+            </select>
 
-          <svg
+            <svg
-            viewBox="0 0 24 24"
+              viewBox="0 0 24 24"
-            fill="none"
+              fill="none"
-            stroke="currentColor"
+              stroke="currentColor"
-            stroke-width="2"
+              stroke-width="2"
-            stroke-linecap="round"
+              stroke-linecap="round"
-            stroke-linejoin="round"
+              stroke-linejoin="round"
-          >
+            >
-            <polyline points="6 9 12 15 18 9"></polyline>
+              <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
+            </svg>
+          </div>
+          <div class="mobile-filters-button">
+            <button @click="toggleFiltersMenu">Filter...</button>
+          </div>
         </div>
         <pagination
           :current-page="currentPage"
@@ -96,10 +101,13 @@
         ></pagination>
       </section>
     </div>
-    <section class="filters">
+    <section id="filters" class="filters">
       <!--#region filters  -->
       <div class="filters-wrapper">
         <section class="filter-group">
+          <button class="filter-button-done" @click="toggleFiltersMenu">
+            Done
+          </button>
           <button @click="clearFilters">Clear Filters</button>
           <h3>Categories</h3>
           <p
@@ -411,7 +419,8 @@ export default {
   },
   mounted() {
     document.getElementById('sort-type').value = this.sortType
-    document.getElementById('max-results').value = this.maxResults
+    if (this.pages.length > 1)
+      document.getElementById('max-results').value = this.maxResults
   },
   methods: {
     async fillInitialVersions() {
@@ -566,6 +575,13 @@ export default {
     formatNumber(x) {
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
     },
+    toggleFiltersMenu() {
+      const filters = document.getElementById('filters')
+      const currentlyActive = filters.className === 'filters active'
+      filters.className = `filters${currentlyActive ? '' : ' active'}`
+      document.body.style.overflow =
+        document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+    },
   },
 }
 </script>
@@ -576,6 +592,38 @@ export default {
   align-items: center;
   display: flex;
   justify-content: space-between;
+  flex-flow: column;
+  .iconified-input {
+    width: 100%;
+  }
+  .iconified-select {
+    width: 100%;
+    margin-left: 0;
+    select {
+      width: 100%;
+    }
+  }
+  .sort-paginate {
+    display: flex;
+    width: 100%;
+  }
+  @media screen and (min-width: 900px) {
+    flex-flow: row;
+    .iconified-input {
+      width: auto;
+    }
+    .iconified-select {
+      width: auto;
+      margin-left: 1em;
+      select {
+        width: auto;
+      }
+    }
+    .sort-paginate {
+      display: block;
+      width: auto;
+    }
+  }
 }
 
 .search-bottom {
@@ -592,20 +640,39 @@ export default {
   min-height: 96vh;
 }
 
+.mobile-filters-button {
+  display: inline-block;
+  button {
+    background: var(--color-bg);
+    border: 2px solid var(--color-grey-3);
+    border-radius: var(--size-rounded-sm);
+    padding: 0.5rem;
+  }
+
+  // Hide button on larger screens where it's not needed
+  @media screen and (min-width: 900px) {
+    display: none;
+  }
+}
+
 .filters {
   overflow-y: auto;
   background-color: var(--color-bg);
   border-left: 1px solid var(--color-grey-2);
-  top: 0;
+  position: fixed;
-  position: -webkit-sticky;
+  width: 100vw;
-  position: sticky;
+  right: -100vw;
   max-height: 100vh;
   min-width: 15%;
-  max-width: 15%;
+  overflow-y: auto;
-}
+  top: 3.5rem;
+  height: calc(100vh - 3.5rem);
+  transition: right 150ms;
+  flex-shrink: 0; // Stop shrinking when page contents change
 
-.filters-wrapper {
+  .filters-wrapper {
-  padding: 0 1.5rem;
+    padding: 0 0.75rem;
+  }
 
   h3 {
     color: #718096;
@@ -615,10 +682,28 @@ export default {
     margin-top: 1.5rem;
     text-transform: uppercase;
   }
+
+  // Larger screens that don't need to collapse
+  @media screen and (min-width: 900px) {
+    position: sticky;
+    width: 215px;
+    padding-right: 1rem;
+    transition: none;
+  }
+
+  // Desktop
+  @media screen and (min-width: 1145px) {
+    top: 0;
+    height: 100vh;
+  }
+
+  &.active {
+    right: 0;
+  }
 }
 
 .filter-group {
-  margin-top: 2em;
+  margin-top: 1em;
 
   button {
     width: 100%;
@@ -635,6 +720,10 @@ export default {
     }
   }
 
+  .filter-button-done {
+    display: block;
+  }
+
   p {
     display: flex;
     align-items: center;
@@ -650,6 +739,7 @@ export default {
     svg {
       margin-right: 5px;
       height: 1rem;
+      flex-shrink: 0;
     }
 
     &:hover,
@@ -664,6 +754,18 @@ export default {
     color: var(--color-text);
     border-left: 4px solid var(--color-brand);
   }
+
+  // Large screens that don't collapse
+  @media screen and (min-width: 900px) {
+    .filter-button-done {
+      display: none;
+    }
+  }
+
+  // Desktop
+  @media screen and (min-width: 1145px) {
+    margin-top: 2em;
+  }
 }
 
 .iconified-select {