feat(PageChrome): add responsive container

limit width on desktop size screens

__snapshots__/navbar.test.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navbar Default test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
+  <div class="mx-auto lg:container bg-neutral">
+    <div class="navbar">
       <div class="flex-1">
         <h4>
           <span class="primary">
@@ -23,11 +25,15 @@ exports[`Navbar Default test 1`] = `
           Login
         </button>
       </div>
+    </div>
+  </div>
 </div>
 `;
 
 exports[`Navbar NIP07Exists test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
+  <div class="mx-auto lg:container bg-neutral">
+    <div class="navbar">
       <div class="flex-1">
         <h4>
           <span class="primary">
@@ -46,11 +52,15 @@ exports[`Navbar NIP07Exists test 1`] = `
           Login
         </button>
       </div>
+    </div>
+  </div>
 </div>
 `;
 
 exports[`Navbar NoNIP07 test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
+  <div class="mx-auto lg:container bg-neutral">
+    <div class="navbar">
       <div class="flex-1">
         <h4>
           <span class="primary">
@@ -72,5 +82,7 @@ exports[`Navbar NoNIP07 test 1`] = `
           Login
         </button>
       </div>
+    </div>
+  </div>
 </div>
 `;

src/lib/components/Navbar.svelte

@@ -2,7 +2,9 @@
   export let nip07plugin: boolean = false;
 </script>
 
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
+  <div class="mx-auto lg:container bg-neutral">
+    <div class="navbar">
       <div class="flex-1">
         <h4>
           <span class="primary">git</span>
@@ -12,10 +14,10 @@
       </div>
       <div class="flex-none gap-4">
         {#if !nip07plugin}
-      <div class="btn btn-primary normal-case">
-        Sign up
-      </div>
+          <div class="btn btn-primary normal-case">Sign up</div>
         {/if}
         <button class="btn btn-outline normal-case">Login</button>
       </div>
+    </div>
+  </div>
 </div>

src/routes/+layout.svelte

@@ -5,4 +5,6 @@
 
 <Navbar />
 
-<slot />
+<div class="mx-auto lg:container">
+  <slot />
+</div>