Registry: make Install-in-app a full-width primary button

Author: dooly123

packages/index.html

@@ -302,16 +302,14 @@ <h2 class="flex flex-wrap items-center gap-2 text-xl font-bold">${esc(p.name)} <
       </div>
       ${p.dependencies?`<div><p class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">Dependencies</p><div class="flex flex-wrap gap-1.5">${Object.entries(p.dependencies).map(([k,v])=>`<span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] text-gray-600 dark:bg-white/5 dark:text-gray-300">${esc(k)} ${esc(v)}</span>`).join('')}</div></div>`:''}
       <div>
-        <div class="mb-3 flex items-center justify-between gap-3">
-          <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">How to install</p>
-          <a href="basispm://install?id=${encodeURIComponent(p.id)}&name=${encodeURIComponent(p.name)}&git=${encodeURIComponent(p.gitUrl||'')}&repo=${encodeURIComponent(p.repoUrl||'')}"
-             class="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-gradient-to-r from-brand to-purple-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow hover:shadow-lg"
-             title="Opens the Basis Package Manager app and adds this package. Requires the app installed.">
-            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
-            Install in app
-          </a>
-        </div>
-        <p class="mb-2 text-xs text-gray-400">Have the desktop app? <b>Install in app</b> adds it to your active project. Otherwise use one of the methods below.</p>
+        <p class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">How to install</p>
+        <a href="basispm://install?id=${encodeURIComponent(p.id)}&name=${encodeURIComponent(p.name)}&git=${encodeURIComponent(p.gitUrl||'')}&repo=${encodeURIComponent(p.repoUrl||'')}"
+           class="mb-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-purple-600 px-5 py-4 text-base font-semibold text-white shadow hover:shadow-lg"
+           title="Opens the Basis Package Manager app and adds this package to your active project. Requires the app installed.">
+          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
+          Install in the Basis Package Manager
+        </a>
+        <p class="mb-3 text-center text-xs text-gray-400">Requires the desktop app. Prefer to do it by hand? Use one of these:</p>
         <div class="space-y-3">${installMethods(p)}</div>
       </div>
       <div class="flex flex-wrap gap-2">