Issue #3487845: Make the overall design of the browse page more compact and dense

css/pb.css

@@ -272,7 +272,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 0;
+  padding: 0.5rem 0;
 }
 
 .pb-search-results {
@@ -373,7 +373,7 @@
 .pb-projects-list,
 .pb-projects-grid {
   --grid-layout-gap: 1.5rem;
-  --grid-item--min-width: 400px;
+  --grid-item--min-width: 350px;
   --gap-count: calc(var(--grid-column-count) - 1);
   --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
   --grid-item--max-width: calc(
@@ -796,7 +796,7 @@
 
 /* <Search/Search> */
 .search__form-container {
-  margin: -1px 0 2rem;
+  margin: -1px 0 0.5rem;
   padding: 1.5rem;
   border: 1px solid #dedfe4;
   border-radius: 1px;
@@ -804,6 +804,10 @@
   box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
 }
 
+.search__form-container .form-item {
+  margin-block: 0;
+}
+
 @media screen and (min-width: 600px) {
   .search__form-filters {
     display: grid;
@@ -842,7 +846,7 @@
 }
 
 .search__bar-container.form-item {
-  margin-block-end: 1.5rem;
+  margin-block-end: 0.5rem;
 }
 
 .search__search-bar .search__search_term {
@@ -915,7 +919,7 @@
   border: 3px solid #f3f4f9;
 }
 
-.search__form-filters-container {
+.search__form-container {
   padding: 1rem 1.5rem;
   background-color: #f3f4f9;
 }
@@ -1003,7 +1007,6 @@
 /* <Search/SearchSort> */
 .search__sort {
   z-index: 2;
-  margin-block-end: 1.5rem;
 }
 
 .search__sort label[for] {