Fix nav safe are inset, qr code reactivity

src/app/components/KeyDownload.svelte

@@ -94,8 +94,6 @@
 
     try {
       await downloadText("Nostr Secret Key.txt", cleanupCopy(instructions))
-
-      didDownload = true
     } catch (e) {
       // Dismissing the native share sheet rejects with "Share canceled" — leave
       // the flow gated so the user can try again rather than showing an error.
@@ -107,6 +105,8 @@
         pushToast({theme: "error", message: "We couldn't save your key. Please try again."})
       }
     }
+
+    didDownload = true
   }
 
   const onPasswordChange = () => {

src/app/components/QRCode.svelte

@@ -1,27 +1,33 @@
 <script lang="ts">
   import QRCode from "qrcode"
-  import {onMount} from "svelte"
   import Button from "@lib/components/Button.svelte"
   import {clip} from "@app/toast"
 
   const {code, ...props} = $props()
 
-  let canvas: Element | undefined = $state()
+  let canvas: HTMLCanvasElement | undefined = $state()
   let wrapper: Element | undefined = $state()
   let scale = $state(0.1)
   let height = $state(0)
 
   const copy = () => clip(code)
 
-  onMount(() => {
+  $effect(() => {
-    if (canvas && wrapper) {
+    if (canvas && code) {
       QRCode.toCanvas(canvas, code)
+    }
+  })
 
+  $effect(() => {
+    // Draw first so canvas.width/height reflect the current code, then fit the
+    // intrinsic canvas size to the wrapper. Measure the intrinsic size (not
+    // getBoundingClientRect, which includes the transform below) so this stays
+    // idempotent — otherwise scale feeds back into its own measurement and loops.
+    if (canvas && wrapper && code) {
       const wrapperRect = wrapper.getBoundingClientRect()
-      const canvasRect = canvas.getBoundingClientRect()
 
-      scale = wrapperRect.width / (canvasRect.width * 10)
+      scale = wrapperRect.width / canvas.width
-      height = canvasRect.height * 10 * scale
+      height = canvas.height * scale
     }
   })
 </script>

src/lib/components/space-menu.css

@@ -3,6 +3,11 @@
     .secondary-nav--mobile-space {
       @apply mt-sai bg-backdrop mb-0 w-full max-w-full grow border-0;
 
+      /* Reserve room for the fixed mobile primary nav (h-14) plus the bottom
+         safe-area inset, otherwise the connection status row at the bottom of
+         the menu is hidden behind the nav footer on devices with an inset. */
+      padding-bottom: calc(var(--saib) + 4rem);
+
       .tip[data-tip]::before {
         display: none !important;
       }

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

@@ -21,7 +21,7 @@
 <svelte:window bind:innerWidth={width} />
 
 {#if width <= md}
-  <SecondaryNav visible class="secondary-nav--mobile-space w-auto grow pb-16">
+  <SecondaryNav visible class="secondary-nav--mobile-space w-auto grow">
     <SpaceMenu {url} mobile />
   </SecondaryNav>
 {/if}