[#1426] Fix responsiveness issue in Catalog results

Signed-off-by: Shivam Taneja <[email protected]>
meshery · Sep 21, 2023 · 5e850b8 · 5e850b8
1 parent 6c7c7d8
commit 5e850b8
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/_includes/patterns-filter.html b/_includes/patterns-filter.html
@@ -98,7 +98,7 @@
   font-weight: 200;
 }
 #compatibility-div .input-container .name{
-  margin-left:10px;
+  margin: 0 10px 0 10px;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -111,6 +111,11 @@
   margin: 20px 0; 
 }
 
+#category-div,
+#compatibility-div {
+  flex-wrap: wrap;
+}
+
 </style>
 
 <div class="filter-wrap">
@@ -171,7 +176,7 @@
   technologyLink.addEventListener("click", showTechnology);
 
   function showCategory() {
-    category_div.style.display = "grid";
+    category_div.style.display = "flex";
     category_p.style.display = "grid";
     comp_p.style.display = "none";
     comp_div.style.display = "none";
@@ -186,7 +191,7 @@
     category_div.style.display = "none";
     category_p.style.display = "none";
     comp_p.style.display = "grid";
-    comp_div.style.display = "grid";
+    comp_div.style.display = "flex";
     tech_p.style.display = "none";
     tech_div.style.display = "none";
     document.getElementById("myDropdown").classList.toggle("show");