Get search looking nice

src/app.css

@@ -112,8 +112,28 @@
   @apply overflow-hidden text-ellipsis;
 }
 
+.content-padding-x {
+  @apply px-4 sm:px-8 md:px-12;
+}
+
+.content-padding-t {
+  @apply pt-4 sm:pt-8 md:pt-12;
+}
+
+.content-padding-b {
+  @apply pb-4 sm:pb-8 md:pb-12;
+}
+
+.content-padding-y {
+  @apply content-padding-t content-padding-b;
+}
+
+.content-sizing {
+  @apply m-auto w-full max-w-3xl;
+}
+
 .content {
-  @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
+  @apply content-sizing content-padding-x content-padding-y;
 }
 
 .heading {

src/app/components/PrimaryNav.svelte

@@ -70,7 +70,7 @@
 
 <div
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
-  <div class="m-auto flex max-w-md justify-between px-2">
+  <div class="flex content-padding-x content-sizing justify-between px-2">
     <div class="flex gap-4 sm:gap-8">
       <PrimaryNavItem title="Search" href="/people">
         <Avatar icon="magnifer" class="!h-10 !w-10" />

src/lib/components/ContentSearch.svelte

@@ -0,0 +1,12 @@
+<div class="col-2 h-full content-padding-t content-padding-x {$$props.class}">
+  <div class="z-feature">
+    <div class="content-sizing">
+      <slot name="input" />
+    </div>
+  </div>
+  <div class="overflow-auto pt-2 scroll-container">
+    <div class="content-sizing">
+      <slot name="content" />
+    </div>
+  </div>
+</div>

src/routes/chat/+page.svelte

@@ -5,6 +5,7 @@
   import {pubkey, subscribe} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ContentSearch from "@lib/components/ContentSearch.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
@@ -42,8 +43,9 @@
     </p>
   </div>
 </div>
-<div class="content col-2">
-  <div class="row-2 min-w-0 flex-grow items-center">
+
+<ContentSearch class="md:hidden">
+  <div slot="input" class="row-2 min-w-0 flex-grow items-center">
     <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
@@ -53,6 +55,7 @@
       <Icon icon="add-circle" />
     </Button>
   </div>
+  <div slot="content" class="col-2">
   {#each chats as { id, pubkeys, messages } (id)}
     <ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
   {:else}
@@ -64,4 +67,5 @@
       </Button>
     </div>
   {/each}
-</div>
+  </div>
+</ContentSearch>

src/routes/people/+page.svelte

@@ -4,6 +4,7 @@
   import {profileSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
+  import ContentSearch from "@lib/components/ContentSearch.svelte"
   import PeopleItem from "@app/components/PeopleItem.svelte"
   import {getDefaultPubkeys} from "@app/state"
 
@@ -16,6 +17,7 @@
   $: pubkeys = term ? $profileSearch.searchValues(term) : defaultPubkeys
 
   onMount(() => {
+    console.log(element)
     const scroller = createScroller({
       element,
       onScroll: () => {
@@ -28,14 +30,16 @@
 </script>
 
 <Page>
-  <div class="content col-2" bind:this={element}>
-    <label class="input input-bordered flex w-full items-center gap-2">
+  <ContentSearch>
+    <label slot="input" class="input input-bordered row-2">
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
       <input autofocus bind:value={term} class="grow" type="text" placeholder="Search for people..." />
     </label>
-    {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
-      <PeopleItem {pubkey} />
-    {/each}
-  </div>
+    <div slot="content" class="col-2" bind:this={element}>
+      {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
+        <PeopleItem {pubkey} />
+      {/each}
+    </div>
+  </ContentSearch>
 </Page>