From 44c926cbab45c34e9085984ee5401343c8a28b12 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 2 Aug 2026 19:36:57 +0530
Subject: [PATCH 1/2] fix: plugin page ui for keywords and note

---
 src/pages/plugin/plugin.scss    | 173 +++++++++++++++++++++++++-------
 src/pages/plugin/plugin.view.js |  33 +++---
 2 files changed, 155 insertions(+), 51 deletions(-)

diff --git a/src/pages/plugin/plugin.scss b/src/pages/plugin/plugin.scss
index 7c79840f69..36b076662a 100644
--- a/src/pages/plugin/plugin.scss
+++ b/src/pages/plugin/plugin.scss
@@ -24,6 +24,8 @@
     }
 
     .plugin-info {
+      min-width: 0;
+
       .title-wrapper {
         display: flex;
         align-items: center;
@@ -135,6 +137,27 @@
         }
       }
 
+      .keywords {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-top: 14px;
+
+        .keyword {
+          max-width: 100%;
+          padding: 5px 9px;
+          overflow-wrap: anywhere;
+          border: 1px solid var(--link-text-color);
+          border-color: color-mix(in srgb, var(--link-text-color) 25%, transparent);
+          border-radius: 999px;
+          background: var(--popup-background-color);
+          background: color-mix(in srgb, var(--link-text-color) 10%, transparent);
+          color: var(--link-text-color);
+          font-size: 12px;
+          line-height: 1.25;
+        }
+      }
+
       .legacy-editor-warning {
         display: inline-flex;
         align-items: center;
@@ -158,12 +181,14 @@
     }
 
     .action-buttons {
-      grid-column: 1/-1;
       display: flex;
       flex-wrap: wrap;
+      justify-content: flex-end;
+      align-items: flex-start;
       gap: 8px;
+      width: max-content;
+      max-width: min(260px, 30vw);
 
-      .info:not(.icon),
       .error {
         display: flex;
         color: rgb(255, 185, 92);
@@ -176,16 +201,11 @@
         }
       }
 
-      .info:not(.icon) {
-        color: inherit;
-        align-items: start;
-        text-align: left;
-        gap: 5px;
-        opacity: 0.8;
-        width: 100%;
-      }
-
       .btn {
+        flex: 0 1 auto;
+        justify-content: center;
+        min-width: 112px;
+        min-height: 40px;
         padding: 8px 16px;
         border-radius: 6px;
         border: none;
@@ -225,8 +245,37 @@
       }
     }
 
+    .plugin-action-details {
+      grid-column: 2 / -1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px 20px;
+      min-width: 0;
+      margin-top: -8px;
+
+      .info:not(.icon) {
+        display: flex;
+        flex: 1 1 320px;
+        align-items: flex-start;
+        gap: 5px;
+        min-width: 0;
+        color: inherit;
+        font-size: 0.8rem;
+        line-height: 1.4;
+        text-align: left;
+        opacity: 0.72;
+
+        .icon {
+          flex: 0 0 auto;
+        }
+      }
+    }
+
     .more-info-small {
-      text-align: center;
+      flex: 0 0 auto;
+      text-align: right;
       font-style: italic;
       font-size: 0.8rem;
       opacity: 0.8;
@@ -255,28 +304,6 @@
       padding: 0 0 24px;
 
       #overview {
-        .keywords {
-          display: flex;
-          gap: 6px;
-          flex-wrap: wrap;
-          margin-top: 16px;
-          position: relative;
-
-          .keyword {
-            background: var(--popup-background-color);
-            background: color-mix(in srgb,
-                var(--link-text-color) 10%,
-                transparent);
-            color: var(--link-text-color);
-            padding: 6px 10px;
-            border-radius: 12px;
-            font-size: 13px;
-            transition: all 0.2s;
-            border: 1px solid var(--link-text-color);
-            border: 1px solid color-mix(in srgb, var(--link-text-color) 25%, transparent);
-          }
-        }
-
         pre {
           margin: 16px 0;
           border-radius: 8px;
@@ -463,9 +490,35 @@
       justify-content: center;
     }
 
-    .btn {
-      flex: 1;
+    .plugin-info {
+      width: 100%;
+    }
+
+    .plugin-header .action-buttons {
+      grid-column: 1;
       justify-content: center;
+      width: min(100%, 420px);
+      max-width: none;
+
+      .btn {
+        flex: 1 1 140px;
+        width: auto;
+      }
+    }
+
+    .plugin-header .plugin-action-details {
+      grid-column: 1;
+      width: 100%;
+      margin-top: -4px;
+
+      .info:not(.icon) {
+        flex-basis: 100%;
+      }
+
+      .more-info-small {
+        width: 100%;
+        text-align: center;
+      }
     }
 
     .tabs {
@@ -474,6 +527,52 @@
       padding: 0 24px;
     }
   }
+
+  @media (max-width: 420px) {
+    padding-inline: 16px;
+
+    .plugin-header {
+      gap: 16px;
+
+      .plugin-icon {
+        width: 72px;
+        height: 72px;
+        border-radius: 14px;
+      }
+
+      .plugin-info {
+        .title-wrapper {
+          gap: 8px;
+
+          .plugin-name {
+            width: 100%;
+            font-size: 22px;
+            overflow-wrap: anywhere;
+          }
+
+          .source-indicator {
+            position: static;
+          }
+        }
+
+        .plugin-meta,
+        .metrics-row {
+          column-gap: 12px;
+          row-gap: 8px;
+        }
+      }
+
+      .action-buttons .btn {
+        flex-basis: 100%;
+      }
+    }
+
+    #plugin-tab .options {
+      margin-inline: -16px;
+      padding-inline: 8px;
+      font-size: 0.9rem;
+    }
+  }
 }
 
 .reviews-container {
@@ -593,4 +692,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/plugin/plugin.view.js b/src/pages/plugin/plugin.view.js
index 10e7c76de4..89a8637713 100644
--- a/src/pages/plugin/plugin.view.js
+++ b/src/pages/plugin/plugin.view.js
@@ -80,6 +80,7 @@ export default (props) => {
 	if (votesUp || votesDown) {
 		rating = `${Math.round((votesUp / (votesUp + votesDown)) * 100)}%`;
 	}
+	const showPurchaseWarning = !helpers.shouldAllowExternalPurchase();
 
 	const formatUpdatedDate = (dateString) => {
 		if (!dateString) return null;
@@ -173,20 +174,31 @@ export default (props) => {
 							</div>
 						</div>
 					) : null}
+					{Array.isArray(keywords) && keywords.length ? (
+						<div className="keywords">
+							{keywords.map((keyword) => (
+								<span className="keyword">{keyword}</span>
+							))}
+						</div>
+					) : null}
 					{showEditorSupportWarning ? (
 						<LegacyEditorWarning unsupportedEditor={unsupportedEditor} />
 					) : null}
 				</div>
 				<div className="action-buttons">
 					<Buttons {...props} />
-					{!helpers.shouldAllowExternalPurchase() && (
-						<small className="info">
-							<span className="icon info" />
-							{strings["iap-plugin-purchase-warning"]}
-						</small>
-					)}
 				</div>
-				<MoreInfo {...props} />
+				{showPurchaseWarning || props.purchased ? (
+					<div className="plugin-action-details">
+						{showPurchaseWarning ? (
+							<small className="info">
+								<span className="icon info" />
+								{strings["iap-plugin-purchase-warning"]}
+							</small>
+						) : null}
+						<MoreInfo {...props} />
+					</div>
+				) : null}
 			</div>
 			<TabView id="plugin-tab" disableSwipe={true}>
 				<div className="options" onclick={handleTabClick}>
@@ -202,13 +214,6 @@ export default (props) => {
 				</div>
 				<div className="tab-content">
 					<div id="overview" className="content-section active md">
-						{Array.isArray(keywords) && keywords.length ? (
-							<div className="keywords">
-								{keywords.map((keyword) => (
-									<span className="keyword">{keyword}</span>
-								))}
-							</div>
-						) : null}
 						<section
 							innerHTML={DOMPurify.sanitize(body, { FORBID_TAGS: ["style"] })}
 						/>

From 080f6fa54be58003fdd828e3b89049abf6e53e54 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 2 Aug 2026 19:55:48 +0530
Subject: [PATCH 2/2] make badge a bit nicer

---
 src/pages/plugin/plugin.scss    | 53 +++++++++++++++++++++++++--------
 src/pages/plugin/plugin.view.js |  4 ++-
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/pages/plugin/plugin.scss b/src/pages/plugin/plugin.scss
index 36b076662a..cf88e1b229 100644
--- a/src/pages/plugin/plugin.scss
+++ b/src/pages/plugin/plugin.scss
@@ -36,6 +36,7 @@
         .plugin-name {
           font-size: 24px;
           margin-bottom: 0;
+          overflow-wrap: anywhere;
         }
 
         .source-indicator {
@@ -78,6 +79,9 @@
           display: inline-flex;
           align-items: center;
           gap: 4px;
+          min-width: 0;
+          max-width: 100%;
+          overflow-wrap: anywhere;
           vertical-align: middle;
 
           .icon {
@@ -116,6 +120,7 @@
           display: flex;
           align-items: center;
           gap: 4px;
+          min-width: 0;
 
           .metric-value {
             color: var(--primary-text-color);
@@ -144,9 +149,9 @@
         margin-top: 14px;
 
         .keyword {
-          max-width: 100%;
+          max-width: min(220px, 100%);
           padding: 5px 9px;
-          overflow-wrap: anywhere;
+          overflow: hidden;
           border: 1px solid var(--link-text-color);
           border-color: color-mix(in srgb, var(--link-text-color) 25%, transparent);
           border-radius: 999px;
@@ -155,12 +160,14 @@
           color: var(--link-text-color);
           font-size: 12px;
           line-height: 1.25;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
 
       .legacy-editor-warning {
         display: inline-flex;
-        align-items: center;
+        align-items: baseline;
         gap: 6px;
         max-width: 100%;
         margin-top: 12px;
@@ -176,6 +183,7 @@
           flex: 0 0 auto;
           color: var(--error-text-color);
           font-size: 15px;
+          line-height: 1;
         }
       }
     }
@@ -191,9 +199,11 @@
 
       .error {
         display: flex;
+        max-width: 100%;
         color: rgb(255, 185, 92);
         color: var(--error-text-color);
         align-items: center;
+        overflow-wrap: anywhere;
 
         a {
           color: inherit;
@@ -217,6 +227,10 @@
         align-items: center;
         gap: 6px;
         width: fit-content;
+        max-width: 100%;
+        line-height: 1.2;
+        text-align: center;
+        overflow-wrap: anywhere;
 
         &:hover {
           transform: translateY(-1px);
@@ -250,7 +264,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
-      justify-content: space-between;
+      justify-content: flex-end;
       gap: 8px 20px;
       min-width: 0;
       margin-top: -8px;
@@ -258,8 +272,8 @@
       .info:not(.icon) {
         display: flex;
         flex: 1 1 320px;
-        align-items: flex-start;
-        gap: 5px;
+        align-items: center;
+        gap: 8px;
         min-width: 0;
         color: inherit;
         font-size: 0.8rem;
@@ -269,6 +283,13 @@
 
         .icon {
           flex: 0 0 auto;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 18px;
+          height: 18px;
+          font-size: 15px;
+          line-height: 1;
         }
       }
     }
@@ -472,15 +493,26 @@
 
   @media (max-width: 768px) {
     .plugin-header {
+      position: relative;
       grid-template-columns: 1fr;
       justify-items: center;
       text-align: center;
     }
 
-    .source-indicator {
+    .plugin-header .plugin-info .title-wrapper .source-indicator {
       position: absolute;
-      top: 20px;
-      right: 20px;
+      top: 52px;
+      inset-inline-start: calc(50% + 10px);
+      z-index: 1;
+      max-width: calc(50% - 18px);
+      box-sizing: border-box;
+      box-shadow: 0 2px 8px var(--box-shadow-color);
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
     .title-wrapper,
@@ -550,9 +582,6 @@
             overflow-wrap: anywhere;
           }
 
-          .source-indicator {
-            position: static;
-          }
         }
 
         .plugin-meta,
diff --git a/src/pages/plugin/plugin.view.js b/src/pages/plugin/plugin.view.js
index 89a8637713..f93bc64943 100644
--- a/src/pages/plugin/plugin.view.js
+++ b/src/pages/plugin/plugin.view.js
@@ -177,7 +177,9 @@ export default (props) => {
 					{Array.isArray(keywords) && keywords.length ? (
 						<div className="keywords">
 							{keywords.map((keyword) => (
-								<span className="keyword">{keyword}</span>
+								<span className="keyword" title={keyword}>
+									{keyword}
+								</span>
 							))}
 						</div>
 					) : null}