Stack the hosting relay row and corner its alert dismiss on mobile

src/app/components/hosting/BillingPrompts.svelte

@@ -70,20 +70,31 @@
   })
 </script>
 
-{#snippet card(className: string, icon: string, message: string, actions: Snippet)}
+{#snippet card(
-  <div
+  className: string,
-    class={cx(
+  icon: string,
-      "card card-sm flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+  message: string,
-      className,
+  actions: Snippet,
-    )}>
+  dismiss?: () => void,
-    <div class="flex min-w-0 items-start gap-3">
+)}
+  <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>
       <div class="flex shrink-0 items-center gap-2">
         {@render actions()}
       </div>
     </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}
 
 {#snippet churnedActions()}
@@ -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}

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}">
+<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 flex-1">
+    <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 class="flex shrink-0 items-center gap-2">
+  </div>
+  <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>