From e2af6f7613202d9afe5d21844750ce2e61ece022 Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Mon, 19 Oct 2020 13:29:41 +0530
Subject: [PATCH 1/3] fix the PluginGrid on mobiles sizes

---
 microsite/pages/en/plugins.js    |  2 +-
 microsite/static/css/plugins.css | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js
index a8255bcd0d..25a92d3106 100644
--- a/microsite/pages/en/plugins.js
+++ b/microsite/pages/en/plugins.js
@@ -44,7 +44,7 @@ const Plugins = () => (
         </span>
       </div>
       <BulletLine style={{ width: '100% ' }} />
-      <Container wrapped className="grid">
+      <Container wrapped className="PluginGrid">
         {pluginMetadata.map(
           ({
             iconUrl,
diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css
index 9a8bbafa46..4b2a1cf9bd 100644
--- a/microsite/static/css/plugins.css
+++ b/microsite/static/css/plugins.css
@@ -6,7 +6,7 @@
   flex-direction: column;
 }
 
-.grid {
+.PluginGrid {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(4, 1fr);
@@ -15,17 +15,23 @@
 }
 
 @media (max-width: 1200px) {
-  .grid {
+  .PluginGrid {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media only screen and (max-width: 815px) {
-  .grid {
+  .PluginGrid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
+@media only screen and (max-width: 485px) {
+  .PluginGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .PluginCard img {
   float: left;
   margin: 0px 16px 8px 0px;

From 765dbeb2e466ff660ae92402f786fa9434acb428 Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Mon, 19 Oct 2020 15:16:42 +0530
Subject: [PATCH 2/3] align 'Add to Marketplace' button on plugins page

---
 microsite/static/css/plugins.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css
index 4b2a1cf9bd..d5d5411146 100644
--- a/microsite/static/css/plugins.css
+++ b/microsite/static/css/plugins.css
@@ -56,6 +56,12 @@
   right: 0px;
 }
 
+@media only screen and (max-width: 485px) {
+  .PluginAddNewButton {
+    bottom: -4px;
+  }
+}
+
 .ButtonFilled {
   padding: 4px 8px;
   border-radius: 4px;

From 1367bad0e7f633a46483dcdd0093018431dc7f32 Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Mon, 19 Oct 2020 17:22:44 +0530
Subject: [PATCH 3/3] fix the plugin card on plugins page

---
 microsite/pages/en/plugins.js    | 31 ++++++++++-----------
 microsite/static/css/plugins.css | 47 ++++++++++++++++++++++----------
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js
index 25a92d3106..66f3a9776d 100644
--- a/microsite/pages/en/plugins.js
+++ b/microsite/pages/en/plugins.js
@@ -57,26 +57,25 @@ const Plugins = () => (
           }) => (
             <div className="PluginCard">
               <div className="PluginCardHeader">
-                <img src={iconUrl || defaultIconUrl} alt={title} />
-                <h2 className="PluginCardTitle">{title}</h2>
-                <p className="Author">
-                  by <a href={authorUrl}>{author}</a>
-                </p>
-                <span className="ChipOutlined">{category}</span>
+                <div className="PluginCardImage">
+                  <img src={iconUrl || defaultIconUrl} alt={title} />
+                </div>
+                <div className="PluginCardInfo">
+                  <h3 className="PluginCardTitle">{title}</h3>
+                  <p className="PluginCardAuthor">
+                    by <a href={authorUrl}>{author}</a>
+                  </p>
+                  <span className="PluginCardChipOutlined">{category}</span>
+                </div>
               </div>
               <div className="PluginCardBody">
                 <p>{truncate(description)}</p>
               </div>
-              <Container className="PluginCardFooter">
-                <span>
-                  <a
-                    className="PluginCardLink ButtonFilled"
-                    href={documentation}
-                  >
-                    Explore
-                  </a>
-                </span>
-              </Container>
+              <div className="PluginCardFooter">
+                <a className="ButtonFilled" href={documentation}>
+                  Explore
+                </a>
+              </div>
             </div>
           ),
         )}
diff --git a/microsite/static/css/plugins.css b/microsite/static/css/plugins.css
index d5d5411146..8a0d843dc9 100644
--- a/microsite/static/css/plugins.css
+++ b/microsite/static/css/plugins.css
@@ -40,14 +40,32 @@
 }
 
 .PluginCardHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   max-height: fit-content;
   min-height: fit-content;
 }
 
+.PluginCardImage {
+  width: 80px;
+  height: 80px;
+  margin-right: 16px;
+}
+
+.PluginCardImage img {
+  width: 100%;
+  max-width: 100%;
+}
+
 .PluginCardTitle {
   color: white;
   vertical-align: top;
-  margin: 8px 0px 0px 16px;
+  margin: 8px 0 0;
+}
+
+.PluginCardInfo {
+  flex: 1;
 }
 
 .PluginAddNewButton {
@@ -66,7 +84,6 @@
   padding: 4px 8px;
   border-radius: 4px;
   color: #69ddc7;
-  margin-top: 36px;
 }
 
 .ButtonFilled:hover {
@@ -74,7 +91,7 @@
   background-color: transparent;
 }
 
-.ChipOutlined {
+.PluginCardChipOutlined {
   font-size: small;
   border-radius: 16px;
   padding: 2px 8px;
@@ -82,11 +99,16 @@
   color: #69ddc7;
 }
 
-.PluginCardLink {
+.PluginCardFooter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: auto;
+  min-height: 2em;
+}
+
+.PluginCardFooter a {
   padding: 2px 8px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
 }
 
 .PluginPageLayout {
@@ -107,18 +129,13 @@
   padding-top: 8px;
 }
 
-.PluginCardFooter {
-  position: relative;
-  min-height: 2em;
-}
-
-.Author,
-.Author a {
+.PluginCardAuthor,
+.PluginCardAuthor a {
   margin-bottom: 0.25em;
   color: rgba(255, 255, 255, 0.6);
 }
 
-.Author a:hover {
+.PluginCardAuthor a:hover {
   color: white;
 }