Work on mobile layout

src/routes/+layout.svelte

@@ -110,10 +110,11 @@
 {:then}
   <div data-theme={$theme}>
     <div class="flex h-screen overflow-hidden">
-      <PrimaryNav />
-      {#key JSON.stringify($page.params)}
-        <slot />
-      {/key}
+      <PrimaryNav>
+        {#key JSON.stringify($page.params)}
+          <slot />
+        {/key}
+      </PrimaryNav>
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
       {#if prev && !prev.options?.drawer}

src/routes/discover/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import Masonry from "svelte-bricks"
-  import {displayRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/routes"
   import {userMembership, discoverRelays, getMembershipUrls} from "@app/state"
 
@@ -47,7 +48,7 @@
     let:item={relay}>
     <a
       href={makeSpacePath(relay.url)}
-      class="flex flex-col gap-2 card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
+      class="flex flex-col gap-2 card2 text-center bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
       <div class="center avatar mt-8">
         <div
           class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
@@ -69,10 +70,13 @@
           </div>
         </div>
       {/if}
-      <h2 class="text-center">{displayRelayUrl(relay.url)}</h2>
-      {#if relay.profile?.description}
-        <p class="py-4 text-center text-sm">{relay.profile.description}</p>
-      {/if}
+      <div>
+        <h2 class="text-center text-xl">
+          <RelayName url={relay.url} />
+        </h2>
+        <p class="opacity-75 text-sm">{relay.url}</p>
+      </div>
+      <RelayDescription url={relay.url} />
     </a>
   </Masonry>
 </div>

src/routes/home/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import {pushModal} from "@app/modal"
@@ -20,18 +22,34 @@
       <h1 class="text-center text-5xl">Welcome to</h1>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid gap-3 lg:grid-cols-2">
-        <CardButton icon="add-circle" title="Create a space" class="h-24" on:click={createSpace}>
-          Invite all your friends, do life together.
-        </CardButton>
-        <CardButton icon="compass" title="Discover spaces" class="h-24" on:click={browseSpaces}>
-          Find a community based on your hobbies or interests.
-        </CardButton>
-        <CardButton icon="plain" title="Leave feedback" class="h-24" on:click={leaveFeedback}>
-          Let us know how we can improve by giving us feedback.
-        </CardButton>
-        <CardButton icon="hand-pills" title="Donate to Flotilla" class="h-24" on:click={donate}>
-          Support the project by donating to the developer.
-        </CardButton>
+        <Button on:click={createSpace}>
+          <CardButton>
+            <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+            <div slot="title">Create a space</div>
+            <div slot="info">Invite all your friends, do life together.</div>
+          </CardButton>
+        </Button>
+        <Button on:click={browseSpaces}>
+          <CardButton>
+            <div slot="icon"><Icon icon="compass" size={7} /></div>
+            <div slot="title">Discover spaces</div>
+            <div slot="info">Find a community based on your hobbies or interests.</div>
+          </CardButton>
+        </Button>
+        <Button on:click={leaveFeedback}>
+          <CardButton>
+            <div slot="icon"><Icon icon="plain" size={7} /></div>
+            <div slot="title">Leave feedback</div>
+            <div slot="info">Let us know how we can improve by giving us feedback.</div>
+          </CardButton>
+        </Button>
+        <Button on:click={donate}>
+          <CardButton>
+            <div slot="icon"><Icon icon="hand-pills" size={7} /></div>
+            <div slot="title">Donate to Flotilla</div>
+            <div slot="info">Support the project by donating to the developer.</div>
+          </CardButton>
+        </Button>
       </div>
     </div>
   </div>

src/routes/spaces/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import {goto} from '$app/navigation'
+  import Icon from '@lib/components/Icon.svelte'
+  import Page from '@lib/components/Page.svelte'
+  import Link from '@lib/components/Link.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import Divider from '@lib/components/Divider.svelte'
+  import CardButton from '@lib/components/CardButton.svelte'
+  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
+  import {userMembership, getMembershipUrls} from "@app/state"
+  import {makeSpacePath} from "@app/routes"
+  import {pushModal} from "@app/modal"
+
+  const createSpace = () => pushModal(SpaceCreateExternal)
+
+  const browseSpaces = () => goto("/discover")
+</script>
+
+<Page>
+  <div class="content column gap-4">
+    <h1 class="superheading mt-20">Spaces</h1>
+    <p class="text-center">Jump back in to your community, or find a new one</p>
+    <div class="flex flex-col gap-2">
+      {#each getMembershipUrls($userMembership) as url (url)}
+        <Link href={makeSpacePath(url)}>
+          <CardButton>
+            <div slot="icon"><SpaceAvatar {url} /></div>
+            <div slot="title"><RelayName {url} /></div>
+            <div slot="info"><RelayDescription {url} /></div>
+          </CardButton>
+        </Link>
+      {/each}
+      <Divider />
+      <Button on:click={createSpace}>
+        <CardButton>
+          <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+          <div slot="title">Create a space</div>
+          <div slot="info">Invite all your friends, do life together.</div>
+        </CardButton>
+      </Button>
+      <Button on:click={browseSpaces}>
+        <CardButton>
+          <div slot="icon"><Icon icon="compass" size={7} /></div>
+          <div slot="title">Discover spaces</div>
+          <div slot="info">Find a community based on your hobbies or interests.</div>
+        </CardButton>
+      </Button>
+    </div>
+  </div>
+</Page>

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -80,7 +80,7 @@
   }, 3000)
 </script>
 
-<div class="relative flex h-screen flex-col">
+<div class="relative flex h-full flex-col">
   <div class="relative z-feature mx-2 rounded-xl pt-4">
     <div
       class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">