enh(dashboard): update max width constraints on instance detail pages

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,43 +19,31 @@
 });`
 </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 -->
+  <!-- These should be p but the inside already has p -->
-<div>
+  <div>
     <p class="mb-2">Your PocketBase URL is</p>
     <CodeSample code={url} />
-</div>
+  </div>
 
-<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>
+  <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>
 
-<div>
+  <div>
     <p>Additional Resources:</p>
     <ul class="list-disc pl-4">
       <li>
@@ -64,4 +53,5 @@
         <a href="https://www.npmjs.com/package/pocketbase" target="_blank" class="link">PocketBase NPM Package</a>
       </li>
     </ul>
+  </div>
 </div>

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">
+  <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>
 
-<ErrorMessage message={errorMessage} />
+  <ErrorMessage message={errorMessage} />
 
-<Toggle checked={!!syncAdmin} onChange={handleChange} />
+  <Toggle checked={!!syncAdmin} onChange={handleChange} />
+</div>

packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte

@@ -63,13 +63,14 @@
   }
 </script>
 
-<CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader>
+<div class="max-w-2xl">
+  <CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader>
 
-{#if power}
+  {#if power}
     <AlertBar message="Instance must be powered off before deleting." type="error" />
-{/if}
+  {/if}
 
-<div class="mb-8">
+  <div class="mb-8">
     Deleting your instance will immediately and permanently delete your instance:
     <ul class="ml-10 text-error">
       <li>Your subdomain</li>
@@ -79,13 +80,14 @@
       <li><pre>pb_static/*</pre></li>
     </ul>
     If you are storing files on S3, you must delete them separately.
-</div>
+  </div>
 
-<ErrorMessage message={errorMessage} />
+  <ErrorMessage message={errorMessage} />
 
-<form class="flex change-version-form-container-query gap-4" on:submit={handleSave}>
+  <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>
+  </form>
+</div>
 
 <style>
   .change-version-form-container-query {

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">
+  <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>
 
-<ErrorMessage message={errorMessage} />
+  <ErrorMessage message={errorMessage} />
 
-<Toggle onChange={handleChange} checked={!!dev} onClass="warning" />
+  <Toggle onChange={handleChange} checked={!!dev} onClass="warning" />
+</div>

packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte

@@ -15,14 +15,15 @@
   const ftpUrl = FTP_URL(email)
 </script>
 
-<CardHeader documentation={`/docs/ftp`}>FTP Access</CardHeader>
+<div class="max-w-2xl">
-<div class="mb-8">Securely access your instance files via FTPS. Use your PocketHost account login and password.</div>
+  <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">
+  <div class="mb-12">
     <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
-</div>
+  </div>
 
-<table class="table">
+  <table class="table">
     <thead>
       <tr>
         <th class="border-b-2 border-neutral">Directory</th>
@@ -48,4 +49,5 @@
         <td>The PocketBase JS hooks directory</td>
       </tr>
     </tbody>
-</table>
+  </table>
+</div>

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">

packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte

@@ -14,6 +14,7 @@
   <title>{subdomain} secrets - PocketHost</title>
 </svelte:head>
 
-<!-- Consistency is key -->
+<div class="max-w-2xl">
-<CardHeader>Secrets</CardHeader>
+  <CardHeader>Secrets</CardHeader>
-<SecretsInner />
+  <SecretsInner />
+</div>