Fix mobile navigation

src/app/components/PrimaryNav.svelte

@@ -10,6 +10,7 @@
   import Divider from "@lib/components/Divider.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
+  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
   import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
   import {userSpaceUrls} from "@app/groups"
   import {PLATFORM_RELAYS} from "@app/env"
@@ -66,23 +67,23 @@
   class="hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-line bg-surface md:hidden">
   <div class="flex h-full justify-between px-2">
     <div class="flex items-center gap-6">
-      <PrimaryNavItem title="Search" href="/people">
+      {#if PLATFORM_RELAYS.length === 1}
+        <PrimaryNavItemSpace url={PLATFORM_RELAYS[0]} />
+      {:else}
+        <PrimaryNavItem href="/people">
           <ImageIcon alt="Search" src={Magnifier} size={8} />
         </PrimaryNavItem>
-      <PrimaryNavItem
+      {/if}
-        title="Messages"
+      <PrimaryNavItem href="/chat" onclick={chatHandler} notification={$notifications.has("/chat")}>
-        href="/chat"
-        onclick={chatHandler}
-        notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
-        <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
+        <PrimaryNavItem href="/spaces" notification={anySpaceNotifications}>
           <ImageIcon alt="Spaces" src={Widget} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>
-    <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
+    <PrimaryNavItem onclick={showSettingsMenu}>
       {#if $userProfile?.picture}
         <ImageIcon alt="Settings" src={$userProfile?.picture} size={10} class="rounded-full" />
       {:else}

src/app/components/SpaceBar.svelte

@@ -7,7 +7,6 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
-  import RelayIcon from "@app/components/RelayIcon.svelte"
   import {decodeRelay} from "@app/relays"
   import {makeSpacePath} from "@app/routes"
 
@@ -32,7 +31,6 @@
     <div class="flex grow items-center justify-between gap-4">
       <div class="flex min-w-0 flex-col">
         <div class="flex min-w-0 items-start gap-2">
-          <RelayIcon {url} size={5} class="shrink-0 rounded-full md:hidden" />
           <div class="hidden shrink-0 md:flex md:items-center place-self-center">
             {@render leading?.()}
           </div>
@@ -40,7 +38,7 @@
             {@render title?.()}
           </div>
         </div>
-        <div class="text-xs text-primary pl-7 md:hidden">
+        <div class="text-xs text-primary md:hidden">
           {displayRelayUrl(url)}
         </div>
       </div>

src/app/components/SpaceMenu.svelte

@@ -313,8 +313,7 @@
       <div class="h-5 shrink-0"></div>
     </div>
   </SecondaryNavSection>
-  <div
+  <div class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-1 md:pb-2 z-nav">
-    class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
     <VoiceWidget />
     <Link href={makeSpacePath(url, "about")} class="button button-neutral button-sm h-10">
       <SocketStatusIndicator {url} />

src/routes/spaces/[relay]/+page.svelte

@@ -22,7 +22,7 @@
 <svelte:window bind:innerWidth={width} />
 
 {#if width <= md}
-  <div class="primary-nav flex mb-14">
+  <div class="primary-nav">
     <PrimaryNavSpaces />
   </div>
   <SecondaryNav visible class="w-auto grow pb-16">

src/routes/spaces/[relay]/about/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
   import Pen from "@assets/icons/pen.svg?dataurl"
+  import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
   import ShieldUser from "@assets/icons/shield-user.svg?dataurl"
   import BillList from "@assets/icons/bill-list.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -17,6 +19,7 @@
   import SpaceMembersSummary from "@app/components/SpaceMembersSummary.svelte"
   import SpaceFeaturedContent from "@app/components/SpaceFeaturedContent.svelte"
   import {deriveUserIsSpaceAdmin} from "@app/members"
+  import {makeSpacePath} from "@app/routes"
   import {decodeRelay} from "@app/relays"
   import {pushModal} from "@app/modal"
 
@@ -25,9 +28,14 @@
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
 
   const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
+
+  const showMenu = () => goto(makeSpacePath(url))
 </script>
 
 <PageContent class="flex flex-col gap-4 p-4">
+  <Button onclick={showMenu} class="button button-neutral md:hidden place-self-start">
+    <Icon icon={ArrowLeft} size={7} /> Go Back
+  </Button>
   <div class="card flex flex-col gap-4">
     <div class="relative flex gap-4">
       <div class="relative">
@@ -35,7 +43,7 @@
       </div>
       <div class="flex min-w-0 flex-col">
         <h1 class="ellipsize whitespace-nowrap">
-          <RelayName {url} class="text-2xl font-bold" />
+          <RelayName {url} class="text-xl sm:text-2xl font-bold" />
         </h1>
         <p class="ellipsize text-sm text-primary">{displayRelayUrl(url)}</p>
       </div>
@@ -100,7 +108,7 @@
     {#if $userIsAdmin}
       <Button class="button button-primary" onclick={startEdit}>
         <Icon icon={Pen} />
-        <span class="hidden sm:inline">Edit Space</span>
+        Edit Space
       </Button>
     {/if}
   </div>