From 2fd0aa01d51bd9237b24850d6ee8dab90d29e861 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 09:03:13 -0500
Subject: [PATCH] Adjust mobile nav trigger spacing and add Node version pin

- Shrink the mobile nav trigger and add a larger hit area
- Add `.nvmrc` to pin Node 22 for local development
---
 .nvmrc         |   1 +
 src/styles.css | 179 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..2bd5a0a9
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/src/styles.css b/src/styles.css
index 005b682a..18d101fb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -237,8 +237,9 @@ code {
 }
 
 .nav-mobile-trigger {
-  width: 44px;
-  height: 44px;
+  position: relative;
+  width: 38px;
+  height: 38px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--line);
   background: var(--surface);
@@ -250,6 +251,13 @@ code {
     box-shadow 0.2s ease;
 }
 
+.nav-mobile-trigger::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: var(--radius-pill);
+}
+
 .nav-mobile-trigger:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 18px rgba(255, 107, 74, 0.18);
@@ -2183,6 +2191,173 @@ code {
   overflow-x: auto;
 }
 
+/* ── Plugin Detail Page ── */
+
+.plugin-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.plugin-detail-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.plugin-version-badge {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 2px 10px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--ink-soft);
+  vertical-align: middle;
+  letter-spacing: 0.01em;
+}
+
+.plugin-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin-top: 4px;
+}
+
+.plugin-meta-link {
+  font-size: 0.85rem;
+  color: var(--accent);
+  text-decoration: none;
+}
+.plugin-meta-link:hover {
+  text-decoration: underline;
+}
+
+.plugin-install-section {
+  margin-top: 16px;
+}
+
+.plugin-install-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--surface-muted);
+  border: 1px solid var(--line);
+}
+
+.plugin-install-code {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 0.88rem;
+  line-height: 1.5;
+  background: none;
+  border: none;
+  color: var(--ink);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.plugin-release-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.plugin-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.plugin-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ink);
+}
+
+.plugin-kv-grid {
+  display: grid;
+  gap: 0;
+}
+
+.plugin-kv-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 0.35fr) 1fr;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+  align-items: baseline;
+}
+.plugin-kv-row:last-child {
+  border-bottom: none;
+}
+
+.plugin-kv-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--ink-soft);
+  margin: 0;
+}
+
+.plugin-kv-value {
+  font-size: 0.88rem;
+  color: var(--ink);
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.plugin-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.plugin-external-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--accent);
+  text-decoration: none;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+.plugin-external-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .plugin-kv-row {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .plugin-install-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .plugin-install-code {
+    font-size: 0.82rem;
+  }
+  .plugin-release-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* ── End Plugin Detail ── */
+
 .skill-owner-tools {
   display: grid;
   gap: 14px;