Fix search page

src/app.css

@@ -116,6 +116,18 @@
   @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
 }
 
+.content-t {
+  @apply pt-4 sm:pt-8 md:pt-12;
+}
+
+.content-b {
+  @apply pb-4 sm:pb-8 md:pb-12;
+}
+
+.content-x {
+  @apply px-4 sm:px-8 md:px-12;
+}
+
 .heading {
   @apply text-center text-2xl;
 }

src/routes/home/people/+page.svelte

@@ -26,14 +26,14 @@
   })
 </script>
 
-<div class="fixed flex bg-base-200 pt-8 left-8 top-0 right-8 z-feature">
+<div class="column max-h-full content-t" bind:this={element}>
-  <label class="input input-bordered flex w-full items-center gap-2">
+  <div class="flex-grow content-x">
-    <Icon icon="magnifer" />
+    <label class="input input-bordered flex w-full items-center gap-2">
-    <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
+      <Icon icon="magnifer" />
-  </label>
+      <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
-</div>
+    </label>
-<div class="content column gap-4 !mt-14" bind:this={element}>
+  </div>
-  <div class="flex flex-col gap-2">
+  <div class="content-b content-x flex flex-col gap-2 overflow-auto pt-2">
     {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
       <PeopleItem {pubkey} />
     {/each}