From 32e46da4404c39035cae9e4518aef6fd5067f132 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Fri, 11 Sep 2026 16:20:39 +0000
Subject: [PATCH] Stack the hosting relay row and corner its alert dismiss on
 mobile

---
 .../components/hosting/BillingPrompts.svelte  | 37 ++++++++++++-------
 .../components/hosting/RelayListItem.svelte   | 16 ++++----
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/app/components/hosting/BillingPrompts.svelte b/src/app/components/hosting/BillingPrompts.svelte
index 196ceab9..9c1263bd 100644
--- a/src/app/components/hosting/BillingPrompts.svelte
+++ b/src/app/components/hosting/BillingPrompts.svelte
@@ -70,19 +70,30 @@
   })
 </script>
 
-{#snippet card(className: string, icon: string, message: string, actions: Snippet)}
-  <div
-    class={cx(
-      "card card-sm flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
-      className,
-    )}>
-    <div class="flex min-w-0 items-start gap-3">
-      <Icon {icon} size={5} class="mt-0.5 shrink-0" />
+{#snippet card(
+  className: string,
+  icon: string,
+  message: string,
+  actions: Snippet,
+  dismiss?: () => void,
+)}
+  <div class={cx("card card-sm flex items-start gap-3", className)}>
+    <Icon {icon} size={5} class="mt-0.5 shrink-0" />
+    <div
+      class="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
       <p class="min-w-0 text-sm">{message}</p>
+      <div class="flex shrink-0 items-center gap-2">
+        {@render actions()}
+      </div>
     </div>
-    <div class="flex shrink-0 items-center gap-2">
-      {@render actions()}
-    </div>
+    {#if dismiss}
+      <Button
+        class="button button-link button-sm -mt-1 shrink-0"
+        aria-label="Dismiss"
+        onclick={dismiss}>
+        <Icon icon={Close} size={4} />
+      </Button>
+    {/if}
   </div>
 {/snippet}
 
@@ -112,9 +123,6 @@
 
 {#snippet autopayActions()}
   <Button class="button button-sm button-primary" onclick={setUpNwc}>Set up autopay</Button>
-  <Button class="button button-link button-sm" aria-label="Dismiss" onclick={dismissAutopay}>
-    <Icon icon={Close} size={4} />
-  </Button>
 {/snippet}
 
 {#if tenant}
@@ -152,6 +160,7 @@
       InfoCircle,
       "Set up automatic payments so your subscription renews without interruption.",
       autopayActions,
+      dismissAutopay,
     )}
   {/if}
 {/if}
diff --git a/src/app/components/hosting/RelayListItem.svelte b/src/app/components/hosting/RelayListItem.svelte
index 1d611cff..583e9e29 100644
--- a/src/app/components/hosting/RelayListItem.svelte
+++ b/src/app/components/hosting/RelayListItem.svelte
@@ -19,13 +19,15 @@
   const href = $derived(makeSpacePath(getHostedRelayUrl(relay), "admin"))
 </script>
 
-<div class="flex flex-row items-center justify-between gap-3 {className}">
-  <ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
-  <div class="min-w-0 flex-1">
-    <p class="truncate text-sm font-medium">{name}</p>
-    <p class="truncate text-xs opacity-75">{host}</p>
+<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 {className}">
+  <div class="flex min-w-0 flex-1 items-center gap-3">
+    <ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
+    <div class="min-w-0">
+      <p class="truncate text-sm font-medium">{name}</p>
+      <p class="truncate text-xs opacity-75">{host}</p>
+    </div>
   </div>
-  <div class="flex shrink-0 items-center gap-2">
+  <div class="flex flex-wrap items-center gap-2">
     {#if relay.sync_error}
       <Badge variant="warning" title={relay.sync_error}>Failed to sync</Badge>
     {:else}
@@ -36,6 +38,6 @@
     <Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}>
       {ucFirst(relay.plan_id)}
     </Badge>
+    <Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link>
   </div>
-  <Link class="button button-neutral button-sm shrink-0" {href}>Manage</Link>
 </div>