Issue #3376203: Filter's checkbox labels look broken at smaller viewports

css/pb.css

@@ -568,7 +568,7 @@
 }
 .project__status-icon {
   display: block;
-  line-height: 0px;
+  font-size: 30px; /* Used to set size of icon, which is 1em. */
 }
 .project__active-installs-text,
 .project__install-count {
@@ -597,6 +597,9 @@
 }
 
 /* <Project/ProjectIcon> */
+.pb-icon {
+  max-height: 1em;
+}
 .pb-icon--project-listing {
   width: 2.4em;
 }
@@ -659,44 +662,26 @@
 
 /* <Search/FilterGroup> */
 .filter-group__radio {
-  position: absolute;
-  top: 2px;
   width: 20px;
   height: 20px;
-  inset-inline-start: 5px;
 }
 .filter-group__radio:hover {
   cursor: pointer;
 }
-
 .filter-group {
-  position: relative;
-  display: inline-grid;
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  padding-top: 15px;
-  padding-inline-start: 15px;
+  margin: 0;
+  padding: 0;
+  border: none;
 }
-
 .filter-group__title-wrapper {
-  margin-inline-end: 10px;
   font-size: 18px;
+  margin-block-end: 10px;
 }
-
-.filter-group__filter-options {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin-top: 10px;
-}
-
 .filter-group__filter-option {
-  position: relative;
-  margin-bottom: 10px;
-  line-height: 25px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 5px;
 }
 
 @media only screen and (max-width: 72rem) {
@@ -784,22 +769,12 @@
 }
 
 /* <Search/SearchFilters> */
-@media only screen and (min-width: 1200px) {
-  .small-icons {
-    margin-top: -3px;
-    margin-inline-end: 1px;
-  }
-  .search__checkbox-label {
-    display: flex;
-    padding-inline-start: 35px;
-    font-weight: normal;
-  }
-  .search__checkbox-label {
-    display: flex;
-    margin-right: unset;
-    padding-inline-start: 35px;
-    font-weight: normal;
-  }
+.search__filters {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 20px;
 }
 
 /* <Search/SearchFilterToggle> */

sveltejs/src/Search/FilterGroup.svelte

@@ -7,14 +7,10 @@
   export let filterType;
 </script>
 
-<div
-  role="group"
-  aria-labelledby={filterTitle.replace(/\s+/g, '')}
-  class="filter-group"
->
-  <div class="filter-group__title-wrapper" id={filterTitle.replace(/\s+/g, '')}>
+<fieldset class="filter-group">
+  <legend class="filter-group__title-wrapper">
     {filterTitle}:
-  </div>
+  </legend>
   <div class="filter-group__filter-options-wrapper">
     <div class="filter-group__filter-options">
       {#each Object.entries(filterData) as [id, label]}
@@ -37,4 +33,4 @@
       {/each}
     </div>
   </div>
-</div>
+</fieldset>