From c8c711acac47e89c4cc2c1a1408318468e4ead06 Mon Sep 17 00:00:00 2001
From: "antonio.bergas" <anthonyprincedom@hotmail.com>
Date: Thu, 18 May 2023 11:01:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(pluginsFilter):=20fixed=20styl?=
 =?UTF-8?q?e=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: antonio.bergas <anthonyprincedom@hotmail.com>
---
 microsite/src/pages/plugins/index.tsx           | 11 ++++++-----
 microsite/src/pages/plugins/plugins.module.scss | 13 +++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/microsite/src/pages/plugins/index.tsx b/microsite/src/pages/plugins/index.tsx
index 6b2ebe22a1..6b1116712a 100644
--- a/microsite/src/pages/plugins/index.tsx
+++ b/microsite/src/pages/plugins/index.tsx
@@ -111,11 +111,12 @@ const Plugins = () => {
         </div>
 
         <div className="bulletLine margin-bottom--lg"></div>
-
-        <PluginsFilter
-          categories={categories}
-          handleChipClick={handleChipClick}
-        />
+        <div className="pluginsFilterBox">
+          <PluginsFilter
+            categories={categories}
+            handleChipClick={handleChipClick}
+          />
+        </div>
 
         {showCoreFeaturesHeader && <h2>Core Features</h2>}
 
diff --git a/microsite/src/pages/plugins/plugins.module.scss b/microsite/src/pages/plugins/plugins.module.scss
index 2f928fcbf0..3babf0959c 100644
--- a/microsite/src/pages/plugins/plugins.module.scss
+++ b/microsite/src/pages/plugins/plugins.module.scss
@@ -31,12 +31,25 @@
     grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
   }
 
+  @media (max-width: 768px) {
+    :global(.pluginsContainer) {
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+  }
+
   :global(.fit-content) {
     width: fit-content;
   }
 
+  :global(.pluginsFilterBox) {
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 1rem;
+  }
+
   :global(.dropdown) {
     float: right;
+    margin-bottom: 1rem;
   }
 
   :global(.button--info) {