feat: improve plugin list dialog style

dist/BetterYTM.css

@@ -930,21 +930,30 @@ body .bytm-ripple.slower {
   font-size: 1.45rem;
 }
 
+#bytm-plugin-list-dialog-bg {
+  --bytm-plugin-list-secondary-col: #c8c8c8;
+  --bytm-plugin-list-row-padding-ver: 12px;
+  --bytm-plugin-list-row-max-height: 130px;
+}
+
+#bytm-plugin-list-dialog-body {
+  overflow-y: auto;
+  max-height: 100%;
+}
+
 .bytm-plugin-list-no-plugins {
   font-size: 1.7rem;
   text-align: center;
-  padding: 8px 0px;
+  padding: var(--bytm-plugin-list-row-padding-ver) 0px;
 }
 
 .bytm-plugin-list-row {
-  --bytm-plugin-list-row-max-height: 120px;
-
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
   border-bottom: 1px solid var(--bytm-dialog-separator-color, #ccc);
-  padding: 8px 0px;
+  padding: var(--bytm-plugin-list-row-padding-ver) 0px;
   gap: 20px;
   max-height: var(--bytm-plugin-list-row-max-height);
 }
@@ -967,17 +976,34 @@ body .bytm-ripple.slower {
 .bytm-plugin-list-row-title {
   display: inline-flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-end;
   font-size: 1.6rem;
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: 1px;
+}
+
+.bytm-plugin-list-row-version {
+  font-size: 1.25rem;
+  color: var(--bytm-plugin-list-secondary-col);
+  padding-left: 10px;
+  font-weight: normal;
 }
 
 .bytm-plugin-list-row-namespace {
-  font-size: 1rem;
+  color: var(--bytm-plugin-list-secondary-col);
+  font-size: 1.1rem;
   font-weight: 400;
-  color: #ccc;
+  margin-bottom: 5px;
+}
+
+.bytm-plugin-list-row-desc {
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+  white-space: pre-wrap;
+  overflow-x: hidden;
+  max-height: calc(var(--bytm-plugin-list-row-max-height) - 30px);
+  overflow-y: auto;
 }
 
 .bytm-plugin-list-row-links-list {

src/dialogs/pluginList.css

@@ -1,18 +1,27 @@
+#bytm-plugin-list-dialog-bg {
+  --bytm-plugin-list-secondary-col: #c8c8c8;
+  --bytm-plugin-list-row-padding-ver: 12px;
+  --bytm-plugin-list-row-max-height: 130px;
+}
+
+#bytm-plugin-list-dialog-body {
+  overflow-y: auto;
+  max-height: 100%;
+}
+
 .bytm-plugin-list-no-plugins {
   font-size: 1.7rem;
   text-align: center;
-  padding: 8px 0px;
+  padding: var(--bytm-plugin-list-row-padding-ver) 0px;
 }
 
 .bytm-plugin-list-row {
-  --bytm-plugin-list-row-max-height: 120px;
-
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
   border-bottom: 1px solid var(--bytm-dialog-separator-color, #ccc);
-  padding: 8px 0px;
+  padding: var(--bytm-plugin-list-row-padding-ver) 0px;
   gap: 20px;
   max-height: var(--bytm-plugin-list-row-max-height);
 }
@@ -35,17 +44,34 @@
 .bytm-plugin-list-row-title {
   display: inline-flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-end;
   font-size: 1.6rem;
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: 1px;
+}
+
+.bytm-plugin-list-row-version {
+  font-size: 1.25rem;
+  color: var(--bytm-plugin-list-secondary-col);
+  padding-left: 10px;
+  font-weight: normal;
 }
 
 .bytm-plugin-list-row-namespace {
-  font-size: 1rem;
+  color: var(--bytm-plugin-list-secondary-col);
+  font-size: 1.1rem;
   font-weight: 400;
-  color: #ccc;
+  margin-bottom: 5px;
+}
+
+.bytm-plugin-list-row-desc {
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+  white-space: pre-wrap;
+  overflow-x: hidden;
+  max-height: calc(var(--bytm-plugin-list-row-max-height) - 30px);
+  overflow-y: auto;
 }
 
 .bytm-plugin-list-row-links-list {

src/dialogs/pluginList.ts

@@ -8,22 +8,19 @@ let pluginListDialog: BytmDialog | null = null;
 
 /** Creates and/or returns the import dialog */
 export async function getPluginListDialog() {
-  if(!pluginListDialog) {
-    pluginListDialog = new BytmDialog({
-      id: "welcome",
-      width: 900,
-      height: 1000,
-      verticalAlign: "top",
-      closeBtnEnabled: true,
-      closeOnBgClick: true,
-      closeOnEscPress: true,
-      destroyOnClose: true,
-      small: true,
-      renderHeader,
-      renderBody,
-    });
-  }
-  return pluginListDialog;
+  return pluginListDialog = pluginListDialog ?? new BytmDialog({
+    id: "plugin-list",
+    width: 800,
+    height: 600,
+    verticalAlign: "top",
+    closeBtnEnabled: true,
+    closeOnBgClick: true,
+    closeOnEscPress: true,
+    destroyOnClose: true,
+    small: true,
+    renderHeader,
+    renderBody,
+  });
 }
 
 async function renderHeader() {
@@ -61,14 +58,20 @@ async function renderBody() {
     const titleEl = document.createElement("div");
     titleEl.classList.add("bytm-plugin-list-row-title");
     titleEl.tabIndex = 0;
-    titleEl.textContent = titleEl.title = titleEl.ariaLabel = `${plugin.name} - ${plugin.version}`;
+    titleEl.textContent = titleEl.title = titleEl.ariaLabel = plugin.name;
     leftEl.appendChild(titleEl);
 
+    const verEl = document.createElement("span");
+    verEl.classList.add("bytm-plugin-list-row-version");
+    verEl.tabIndex = 0;
+    verEl.textContent = verEl.title = verEl.ariaLabel = `v${plugin.version}`;
+    titleEl.appendChild(verEl);
+
     const namespaceEl = document.createElement("div");
     namespaceEl.classList.add("bytm-plugin-list-row-namespace");
     namespaceEl.tabIndex = 0;
     namespaceEl.textContent = namespaceEl.title = namespaceEl.ariaLabel = plugin.namespace;
-    titleEl.appendChild(namespaceEl);
+    leftEl.appendChild(namespaceEl);
 
     const descEl = document.createElement("p");
     descEl.classList.add("bytm-plugin-list-row-desc");