From bb9d73c4f1af969364a53e509db469b660b0db4f Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 18 Jul 2025 18:22:46 -0700
Subject: [PATCH 1/4] chore(dashboard): remove prose quotes

---
 packages/dashboard/src/app.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/dashboard/src/app.css b/packages/dashboard/src/app.css
index 94d386dd..5c12cfd4 100644
--- a/packages/dashboard/src/app.css
+++ b/packages/dashboard/src/app.css
@@ -13,6 +13,10 @@
   @apply mt-2 mb-2;
 }
 
+.prose :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  quotes: none;
+}
+
 .docs-content img {
   @apply border-accent rounded-lg border;
 }

From 6aad803416c62d41153a67796a77d12b15c68182 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 18 Jul 2025 19:04:59 -0700
Subject: [PATCH 2/4] enh(dashboard): update instance title layout and
 cosmetics

---
 .../instances/[instanceId]/+layout.svelte     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
index 5629801e..1e2a5007 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
@@ -48,23 +48,23 @@
 {#if isReady}
   <div class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-2">
     <div>
-      <div class="flex items-center gap-2">
-        <h2 class="text-4xl md:text-left text-base-content font-bold mb-3 break-words">
+      <div class="flex items-center gap-3">
+        <h2 class="text-4xl md:text-left text-base-content font-bold break-words">
           {$instance.subdomain}
         </h2>
+        <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">
+          v{$instance.version}
+        </span>
+        {#if $instance.dev}
+          <a
+            href={`/instances/${$instance.id}/dev`}
+            class="text-warning animate-pulse text-2xl"
+            title="Dev Mode Active (SLOW)"
+          >
+            🚧
+          </a>
+        {/if}
       </div>
-      <span class="text-gray-400">
-        Version {$instance.version} -
-        <span class="capitalize">{$instance.status}</span>
-      </span>
-      {#if $instance.dev}
-        <a
-          href={`/instances/${$instance.id}/dev`}
-          class="text-warning animate-pulse border-warning border-2 p-1 rounded"
-        >
-          Dev Mode Active (SLOW)
-        </a>
-      {/if}
     </div>
 
     <div>

From 2a8a97e48de0a5252c0b918916d376a3c538e2a4 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 18 Jul 2025 19:09:36 -0700
Subject: [PATCH 3/4] enh(dashboard): update max width constraints on instance
 detail pages

---
 .../instances/[instanceId]/Overview.svelte    | 72 ++++++++-----------
 .../[instanceId]/admin-sync/+page.svelte      | 16 +++--
 .../[instanceId]/delete/+page.svelte          | 42 +++++------
 .../instances/[instanceId]/dev/+page.svelte   | 16 +++--
 .../instances/[instanceId]/ftp/+page.svelte   | 66 ++++++++---------
 .../[instanceId]/rename/+page.svelte          |  2 +-
 .../[instanceId]/secrets/+page.svelte         |  7 +-
 7 files changed, 110 insertions(+), 111 deletions(-)

diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte
index 7d1bdf43..cf636836 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte
@@ -2,6 +2,7 @@
   import CodeSample from '$components/CodeSample.svelte'
   import CardHeader from '$src/components/cards/CardHeader.svelte'
   import { DISCORD_URL, INSTANCE_URL } from '$src/env'
+  import { isCnameActive } from 'pockethost/common'
   import { instance } from './store'
 
   let installSnippet = `npm i pocketbase`
@@ -18,50 +19,39 @@
 });`
 </script>
 
-<CardHeader documentation={`/docs/accessing-instance/`}>Overview</CardHeader>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/accessing-instance/`}>Overview</CardHeader>
 
-<!-- These should be p but the inside already has p -->
-<div>
-  <p class="mb-2">Your PocketBase URL is</p>
-  <CodeSample code={url} />
-</div>
+  <!-- These should be p but the inside already has p -->
+  <div>
+    <p class="mb-2">Your PocketBase URL is</p>
+    <CodeSample code={url} />
+  </div>
 
-<div>
-  <p class="mb-2">Installing PocketBase</p>
-  <CodeSample code={installSnippet} />
-</div>
+  <div>
+    <p class="mb-2">Installing PocketBase</p>
+    <CodeSample code={installSnippet} />
+  </div>
 
-<div>
-  <p class="mb-2">Connecting to Your Instance</p>
-  {#if $instance.cname}
-    {#if $instance.cname_active}
-      <div class="text-accent">Notice: You are in Custom Domain mode</div>
-    {:else}
-      <div class="text-error">
-        Notice: You are in Custom Domain mode but it is not active and will not work. Go find <a
-          href={DISCORD_URL}
-          target="_blank"
-          class="link"><code>.noaxis</code> on Discord</a
-        > to get set up.
-      </div>
-    {/if}
-  {/if}
-  <CodeSample code={connectionSnippet} />
-</div>
+  <div>
+    <p class="mb-2">Connecting to Your Instance</p>
+    <CodeSample code={connectionSnippet} />
+  </div>
 
-<div>
-  <p class="mb-2">Making Your First Query</p>
-  <CodeSample code={firstQuerySnippet} />
-</div>
+  <div>
+    <p class="mb-2">Making Your First Query</p>
+    <CodeSample code={firstQuerySnippet} />
+  </div>
 
-<div>
-  <p>Additional Resources:</p>
-  <ul class="list-disc pl-4">
-    <li>
-      <a href={`https://pocketbase.io/docs/api-records/`} target="_blank" class="link">PocketBase Web APIs</a>
-    </li>
-    <li>
-      <a href="https://www.npmjs.com/package/pocketbase" target="_blank" class="link">PocketBase NPM Package</a>
-    </li>
-  </ul>
+  <div>
+    <p>Additional Resources:</p>
+    <ul class="list-disc pl-4">
+      <li>
+        <a href={`https://pocketbase.io/docs/api-records/`} target="_blank" class="link">PocketBase Web APIs</a>
+      </li>
+      <li>
+        <a href="https://www.npmjs.com/package/pocketbase" target="_blank" class="link">PocketBase NPM Package</a>
+      </li>
+    </ul>
+  </div>
 </div>
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/admin-sync/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/admin-sync/+page.svelte
index ad8e9dde..50742825 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/admin-sync/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/admin-sync/+page.svelte
@@ -22,13 +22,15 @@
   }
 </script>
 
-<CardHeader documentation={`/docs/admin-sync`}>Admin Sync</CardHeader>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/admin-sync`}>Admin Sync</CardHeader>
 
-<p class="mb-8">
-  Admin Sync ensures that your instance always has an admin account that matches the login credentials of your
-  pockethost.io account.
-</p>
+  <p class="mb-8">
+    Admin Sync ensures that your instance always has an admin account that matches the login credentials of your
+    pockethost.io account.
+  </p>
 
-<ErrorMessage message={errorMessage} />
+  <ErrorMessage message={errorMessage} />
 
-<Toggle checked={!!syncAdmin} onChange={handleChange} />
+  <Toggle checked={!!syncAdmin} onChange={handleChange} />
+</div>
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte
index 8b756a4b..5f24fd39 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte
@@ -63,30 +63,32 @@
   }
 </script>
 
-<CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader>
 
-{#if power}
-  <AlertBar message="Instance must be powered off before deleting." type="error" />
-{/if}
+  {#if power}
+    <AlertBar message="Instance must be powered off before deleting." type="error" />
+  {/if}
 
-<div class="mb-8">
-  Deleting your instance will immediately and permanently delete your instance:
-  <ul class="ml-10 text-error">
-    <li>Your subdomain</li>
-    <li><pre>pb_data/*</pre></li>
-    <li><pre>pb_public/*</pre></li>
-    <li><pre>pb_migrations/*</pre></li>
-    <li><pre>pb_static/*</pre></li>
-  </ul>
-  If you are storing files on S3, you must delete them separately.
+  <div class="mb-8">
+    Deleting your instance will immediately and permanently delete your instance:
+    <ul class="ml-10 text-error">
+      <li>Your subdomain</li>
+      <li><pre>pb_data/*</pre></li>
+      <li><pre>pb_public/*</pre></li>
+      <li><pre>pb_migrations/*</pre></li>
+      <li><pre>pb_static/*</pre></li>
+    </ul>
+    If you are storing files on S3, you must delete them separately.
+  </div>
+
+  <ErrorMessage message={errorMessage} />
+
+  <form class="flex change-version-form-container-query gap-4" on:submit={handleSave}>
+    <button type="submit" class="btn btn-error" disabled={power || isButtonDisabled}>Delete Instance</button>
+  </form>
 </div>
 
-<ErrorMessage message={errorMessage} />
-
-<form class="flex change-version-form-container-query gap-4" on:submit={handleSave}>
-  <button type="submit" class="btn btn-error" disabled={power || isButtonDisabled}>Delete Instance</button>
-</form>
-
 <style>
   .change-version-form-container-query {
     flex-direction: column;
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/dev/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/dev/+page.svelte
index e953a73b..abcf800f 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/dev/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/dev/+page.svelte
@@ -20,13 +20,15 @@
   }
 </script>
 
-<CardHeader documentation={`/docs/dev-mode`}>Dev Mode</CardHeader>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/dev-mode`}>Dev Mode</CardHeader>
 
-<p class="mb-8">
-  Starting with PocketBase v0.20.1, your instance will show debugging output in the instance logs. Performance is
-  degraded while Dev Mode is active.
-</p>
+  <p class="mb-8">
+    Starting with PocketBase v0.20.1, your instance will show debugging output in the instance logs. Performance is
+    degraded while Dev Mode is active.
+  </p>
 
-<ErrorMessage message={errorMessage} />
+  <ErrorMessage message={errorMessage} />
 
-<Toggle onChange={handleChange} checked={!!dev} onClass="warning" />
+  <Toggle onChange={handleChange} checked={!!dev} onClass="warning" />
+</div>
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte
index 92be3178..cd8b92bc 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte
@@ -15,37 +15,39 @@
   const ftpUrl = FTP_URL(email)
 </script>
 
-<CardHeader documentation={`/docs/ftp`}>FTP Access</CardHeader>
-<div class="mb-8">Securely access your instance files via FTPS. Use your PocketHost account login and password.</div>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/ftp`}>FTP Access</CardHeader>
+  <div class="mb-8">Securely access your instance files via FTPS. Use your PocketHost account login and password.</div>
 
-<div class="mb-12">
-  <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
+  <div class="mb-12">
+    <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
+  </div>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th class="border-b-2 border-neutral">Directory</th>
+        <th class="border-b-2 border-neutral">Description</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <th>pb_data</th>
+        <td>The PocketBase data directory, including upload storage and database backups</td>
+      </tr>
+      <tr>
+        <th>pb_public</th>
+        <td>Public files, such as a web frontend</td>
+      </tr>
+      <tr>
+        <th>pb_migrations</th>
+        <td>The PocketBase migrations directory</td>
+      </tr>
+      <tr>
+        <th>pb_hooks</th>
+        <td>The PocketBase JS hooks directory</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
-
-<table class="table">
-  <thead>
-    <tr>
-      <th class="border-b-2 border-neutral">Directory</th>
-      <th class="border-b-2 border-neutral">Description</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <th>pb_data</th>
-      <td>The PocketBase data directory, including upload storage and database backups</td>
-    </tr>
-    <tr>
-      <th>pb_public</th>
-      <td>Public files, such as a web frontend</td>
-    </tr>
-    <tr>
-      <th>pb_migrations</th>
-      <td>The PocketBase migrations directory</td>
-    </tr>
-    <tr>
-      <th>pb_hooks</th>
-      <td>The PocketBase JS hooks directory</td>
-    </tr>
-  </tbody>
-</table>
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
index 30268be3..6c1e9473 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
@@ -59,7 +59,7 @@
   }
 </script>
 
-<div class="max-w-lg">
+<div class="max-w-2xl">
   <CardHeader documentation={`/docs/rename-instance`}>Rename Instance</CardHeader>
 
   <p class="mb-8">
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte
index 83f1c168..c7afcf2f 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte
@@ -14,6 +14,7 @@
   <title>{subdomain} secrets - PocketHost</title>
 </svelte:head>
 
-<!-- Consistency is key -->
-<CardHeader>Secrets</CardHeader>
-<SecretsInner />
+<div class="max-w-2xl">
+  <CardHeader>Secrets</CardHeader>
+  <SecretsInner />
+</div>

From 4fcf613aa168bb6f20fd34ff90354e6f0506e4dc Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 18 Jul 2025 19:12:36 -0700
Subject: [PATCH 4/4] enh(dashboard): update condition for v0.23.* user alert
 on instance version page

---
 .../routes/(app)/instances/[instanceId]/version/+page.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
index 2b7caf6c..23b2ede2 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
@@ -88,7 +88,7 @@
     <a href="https://github.com/pocketbase/pocketbase/releases" class="link">every minor release</a> of PocketBase.
   </div>
 
-  {#if $is23Available || is23OrHigher}
+  {#if !is23OrHigher}
     <div class="mb-8 bg-info p-4 rounded text-info-content">
       <p class="font-bold text-xl">Attention v0.23.* users:</p>
       <p>v0.22.* to v0.23.* is a major migration boundary and requires a manual migration process.</p>