fix(snd): mobile UX — how-it-works close button + notFound alignment

app/ui/howItWorksDialog.js

@@ -6,15 +6,25 @@ module.exports = function howItWorksDialog() {
 
     return html`
       <send-how-dialog class="snd-how">
-        <button
-          class="snd-how-close"
-          onclick=${close}
-          aria-label="${t('howItWorksCloseLabel')}"
-        >
-          ×
-        </button>
+        <header class="snd-how-head">
+          <h2 class="snd-display snd-how-title">${t('howItWorksTitle')}</h2>
+          <button
+            type="button"
+            class="snd-how-close"
+            onclick=${close}
+            aria-label="${t('howItWorksCloseLabel')}"
+          >
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+              <line x1="3" y1="3" x2="13" y2="13"
+                    stroke="currentColor" stroke-width="1.75"
+                    stroke-linecap="round"/>
+              <line x1="13" y1="3" x2="3" y2="13"
+                    stroke="currentColor" stroke-width="1.75"
+                    stroke-linecap="round"/>
+            </svg>
+          </button>
+        </header>
 
-        <h2 class="snd-display snd-how-title">${t('howItWorksTitle')}</h2>
         <p class="snd-body-sm snd-how-lede">${t('howItWorksLede')}</p>
 
         ${diagram(t)}

app/ui/notFound.js

@@ -15,21 +15,19 @@ module.exports = function(state, emit) {
             <line x1="35" y1="65" x2="65" y2="35" stroke="var(--snd-mute)" stroke-width="2" stroke-linecap="square"/>
           </svg>
         </div>
-        <p class="snd-tag snd-text-dim">EXPIRED</p>
-        <h1 class="snd-display text-center">
+        <p class="snd-tag snd-text-dim">${state.translate('expiredTag')}</p>
+        <h1 class="snd-display">
           ${state.translate('expiredTitle')}
         </h1>
         <p class="snd-caption snd-text-dim">
-          > share no longer available · file removed from server
+          ${state.translate('expiredCaption')}
         </p>
-        <p class="snd-body snd-text-mute text-center ${state.user.loggedIn ? 'hidden' : ''}">
+        <p class="snd-body snd-text-mute ${state.user.loggedIn ? 'hidden' : ''}">
           ${state.translate('trySendDescription')}
         </p>
-        <p>
-          <a href="/" class="snd-btn snd-btn--primary" role="button">
-            ${state.translate(btnText)}
-          </a>
-        </p>
+        <a href="/" class="snd-btn snd-btn--primary" role="button">
+          ${state.translate(btnText)}
+        </a>
       </section>
     </main>
   `;

app/ui/tokens.css

@@ -644,26 +644,39 @@ send-upload-area {
   position: relative;
 }
 
+.snd-how-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 8px;
+}
+
 .snd-how-close {
-  position: absolute;
-  top: -8px;
-  right: -8px;
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  margin: -10px -10px 0 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: transparent;
-  border: 0;
-  color: var(--snd-mute);
-  font-size: 24px;
-  line-height: 1;
-  padding: 8px;
+  border: 1px solid var(--snd-line);
+  color: var(--snd-text);
   cursor: pointer;
-  transition: color 120ms ease;
+  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
 }
 
-.snd-how-close:hover {
-  color: var(--snd-text);
+.snd-how-close:hover,
+.snd-how-close:focus-visible {
+  border-color: var(--snd-accent);
+  color: var(--snd-accent);
+  outline: 0;
 }
 
 .snd-how-title {
-  margin: 0 0 8px;
+  margin: 0;
+  flex: 1 1 auto;
 }
 
 .snd-how-lede {
@@ -807,11 +820,6 @@ send-upload-area {
 }
 
 @media (max-width: 480px) {
-  .snd-how-close {
-    top: -4px;
-    right: -4px;
-  }
-
   .snd-how-step {
     gap: 12px;
   }
@@ -860,19 +868,47 @@ send-upload-area {
 
 /* Download-complete hero — nested squares with sage check */
 .snd-complete {
-  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 16px;
   padding: 40px 24px;
   max-width: 560px;
   margin: 0 auto;
 }
 
+.snd-complete > * {
+  margin: 0;
+}
+
 .snd-complete-hero {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 4px;
 }
 
+.snd-complete .snd-caption {
+  max-width: 36ch;
+  line-height: 1.6;
+}
+
+@media (max-width: 480px) {
+  .snd-complete {
+    padding: 32px 20px;
+    gap: 14px;
+  }
+
+  .snd-complete .snd-display {
+    font-size: 24px;
+  }
+
+  .snd-complete .snd-caption {
+    font-size: 10px;
+  }
+}
+
 /* Inline QR — hidden on desktop, visible on mobile (<=768px) */
 .snd-qr-inline {
   display: none;

public/locales/en-US/send.ftl

@@ -118,7 +118,9 @@ tooManyArchives = { $count ->
      [one] Only 1 archive is allowed.
     *[other] Only { $count } archives are allowed.
 }
-expiredTitle = This link has expired.
+expiredTitle = This link isn’t available.
+expiredTag = expired or missing
+expiredCaption = The share may have expired, hit its download limit, or never existed.
 notSupportedDescription = { -send-brand } will not work with this browser. { -send-short-brand } works best with the latest version of { -firefox }, and will work with the current version of most browsers.
 downloadFirefox = Download { -firefox }
 legalTitle = { -send-short-brand } Privacy Notice