3195007: allow filter by type and improve compatibility with layout builder iframe modal

Checkpoints

• File an issue
• Addition/Change/Update/Fix
• Merge request
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Documentation
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner

Closes #3195007

css/section-library.css

@@ -3,66 +3,99 @@
 }
 
 .section-library-links {
-  padding: 0;
   display: flex;
   flex-wrap: wrap;
-}
-
-.section-library-links li {
-  display: flex;
-  padding: 0 0.5rem 1rem 0.5rem;
-  width: 50%;
-  justify-content: space-between;
-}
-
-.section-library-links li a {
-  background-color: rgba(0, 0, 0, 0.2);
-  padding: 1.5rem;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.section-library-links li a:hover {
-  background-color: rgba(0, 0, 0, 0.5);
-  text-decoration: none;
-}
+  margin: 0 -10px;
+  padding: 0;
 
-.section-library-links li a img {
-  width: 100%;
+  & li {
+    display: flex;
+    justify-content: space-between;
+    width: calc(33.3333% - 2rem);
+    padding: 0 0.5rem 1rem 0.5rem;
+  }
+
+  & .js-layout-builder-section-library-link {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: center;
+    width: 100%;
+    padding: 1.5rem;
+    transition: all 0.3s ease-in-out;
+    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
 }
 
 .section-library-link-img {
-  max-width: 100%;
-  margin: 0 auto;
   display: block;
+  width: 100%;
+
+  img {
+    display: block;
+    max-width: 100%;
+    max-height: 150px;
+    margin: 0 auto;
+  }
 }
 
 .section-library-link-label {
-  padding-top: 1rem;
   display: block;
+  padding-top: 1rem;
   text-align: center;
 }
 
-/* If #layout_builder_modal enabled */
-#layout-builder-modal .section-library-filter.form-search {
-  box-sizing: border-box;
+.section-library-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-right: -15px;
+  margin-left: -15px;
+
+  & > div {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+
+    &:last-child {
+      flex-grow: initial;
+      flex-shrink: 1;
+      width: 30%;
+      min-width: 170px;
+    }
+  }
 }
 
-#layout-builder-modal .section-library-links li {
-  width: 33.3333333333%;
+/* If #layout_builder_modal enabled */
+#layout-builder-modal {
+  > .section-library-filter.form-search {
+    box-sizing: border-box;
+  }
+
+  > .section-library-filters > div:last-child {
+    min-width: calc(33.3333% + 5px);
+  }
+
+  > .section-library-links li {
+    width: 33.33333%;
+  }
 }
 
 /* links */
 .layout-builder__link--add-section-to-library {
-  padding-left: 1.6em;
-  /* LTR */
+  padding-left: 1.6em; /* LTR */
   color: #686868;
   border-bottom: none;
-  background: url(../images/icons/787878/save.svg) transparent center left/1.5em no-repeat;
-  /* LTR */
+  background: url(../images/icons/787878/save.svg) transparent center left / 1.5em no-repeat; /* LTR */
 }
 
 [dir="rtl"] .layout-builder__link--add-section-to-library {
@@ -72,12 +105,10 @@
 }
 
 .layout-builder__link--import-from-library {
-  padding-left: 1.3em;
-  /* LTR */
+  padding-left: 1.3em; /* LTR */
   color: #686868;
   border-bottom: none;
-  background: url(../images/icons/787878/import.svg) transparent center left/1em no-repeat;
-  /* LTR */
+  background: url(../images/icons/787878/import.svg) transparent center left / 1em no-repeat; /* LTR */
 }
 
 [dir="rtl"] .layout-builder__link--import-from-library {
@@ -89,23 +120,20 @@
 .layout-builder__link--add-section-to-library,
 .layout-builder__link--import-from-library {
   margin-left: 1rem;
-}
 
-.layout-builder__link--add-section-to-library:hover,
-.layout-builder__link--add-section-to-library:active,
-.layout-builder__link--add-section-to-library:focus,
-.layout-builder__link--import-from-library:hover,
-.layout-builder__link--import-from-library:active,
-.layout-builder__link--import-from-library:focus {
-  color: #000;
-  border-bottom-style: none;
+  &:hover,
+  &:active,
+  &.focus {
+    color: #000;
+    border-bottom-style: none;
+  }
 }
 
 .layout-builder__link--add-template-to-library {
   display: block;
-  text-align: center;
+  margin: 1rem 0;
   padding: 1rem;
+  text-align: center;
   border: 1px solid #eee;
-  margin: 1rem 0;
   background: #eee;
 }