From 73202477dd41b110ab332d48c9a032fcdde4adf5 Mon Sep 17 00:00:00 2001
From: Thomas <28439359+thoda-dev@users.noreply.github.com>
Date: Mon, 31 Aug 2026 18:03:22 +0200
Subject: [PATCH 1/2] feat(ui): make every page hold up on a phone

---
 apps/app/app/app.vue                          |  5 +-
 apps/app/app/assets/css/main.css              |  9 +++
 apps/app/app/components/AuthButton.vue        | 61 ++++++++++++++-----
 apps/app/app/components/BackButton.vue        | 17 ++++++
 apps/app/app/components/LanguageSwitcher.vue  | 34 +++++++----
 .../app/components/LegalTemplateDialog.vue    |  8 +--
 .../app/components/UnlimitedNumberField.vue   |  4 +-
 apps/app/app/pages/account.vue                | 25 ++++----
 apps/app/app/pages/admin/allowed-ips.vue      | 18 +++---
 apps/app/app/pages/admin/banned-ips.vue       | 20 +++---
 apps/app/app/pages/admin/invitations.vue      | 16 ++---
 apps/app/app/pages/admin/legal.vue            | 21 +++----
 apps/app/app/pages/admin/settings.vue         |  9 +--
 apps/app/app/pages/admin/storage.vue          | 51 +++++++---------
 apps/app/app/pages/admin/users.vue            | 59 ++++++++----------
 apps/app/app/pages/dashboard.vue              | 30 +++------
 apps/app/app/pages/index.vue                  | 32 ++++------
 apps/app/app/pages/legal/[slug].vue           |  7 +--
 apps/app/app/pages/login.vue                  |  9 ++-
 apps/app/app/pages/p/[id].vue                 |  5 +-
 apps/app/app/pages/register.vue               |  9 ++-
 apps/app/i18n/locales/en.json                 |  3 +-
 apps/app/i18n/locales/fr.json                 |  3 +-
 23 files changed, 238 insertions(+), 217 deletions(-)
 create mode 100644 apps/app/app/components/BackButton.vue

diff --git a/apps/app/app/app.vue b/apps/app/app/app.vue
index 5a7b77e..5b71240 100644
--- a/apps/app/app/app.vue
+++ b/apps/app/app/app.vue
@@ -36,8 +36,9 @@ useHead({
     <NuxtRouteAnnouncer />
     <div class="flex min-h-screen flex-col">
       <!-- Part of the flow rather than fixed over it: on a screen shorter than the content, a floating bar has scrolled text passing behind it. Upstream project and its documentation, not the running instance — a fork is free to repoint both, but the links are attribution. "GitHub" stays out of i18n, a brand name reads the same in every locale, while "Documentation" does not. -->
-      <header class="flex items-center justify-between gap-2 p-4">
-        <div class="flex items-center gap-1">
+      <!-- A phone header holds either these two or a labelled way to sign up, and signing up wins; what stays drops its own label below `sm`. -->
+      <header class="flex items-center justify-end gap-2 p-4 sm:justify-between">
+        <div class="hidden items-center gap-1 sm:flex">
           <UButton
             variant="ghost"
             size="sm"
diff --git a/apps/app/app/assets/css/main.css b/apps/app/app/assets/css/main.css
index 7c95c6f..4d0a91e 100644
--- a/apps/app/app/assets/css/main.css
+++ b/apps/app/app/assets/css/main.css
@@ -1,2 +1,11 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+/* Safari on iOS zooms the whole page whenever a focused field sits under 16px, and every Nuxt UI
+   control is 14px. Only on touch pointers, and only `!important` because the size comes from a class. */
+@media (pointer: coarse) {
+  input:not([type="checkbox"]):not([type="radio"]),
+  textarea {
+    font-size: 1rem !important;
+  }
+}
diff --git a/apps/app/app/components/AuthButton.vue b/apps/app/app/components/AuthButton.vue
index 667af86..4716834 100644
--- a/apps/app/app/components/AuthButton.vue
+++ b/apps/app/app/components/AuthButton.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
 const { t } = useI18n()
 const localePath = useLocalePath()
 
@@ -6,6 +8,20 @@ await ensureAuthSessionLoaded()
 const user = useAuthUser()
 const isAuthenticated = computed(() => !!user.value)
 
+// Signing up was only reachable from inside the login page, which hid it from anyone who has no account yet.
+const publicSettings = await ensurePublicSettingsLoaded()
+const canRegister = computed(() => publicSettings.value?.registrationEnabled === true)
+
+// Everything an account can reach hangs off this one menu, so no page has to carry its own shortcut row.
+const items = computed<DropdownMenuItem[]>(() => [
+  { label: t('account.title'), icon: 'i-lucide-user', to: localePath('/account') },
+  { label: t('dashboard.title'), icon: 'i-lucide-list', to: localePath('/dashboard') },
+  // The whole admin area opens from its settings page, which an admin may enter as well as a super admin.
+  ...(user.value && ['admin', 'super_admin'].includes(user.value.role)
+    ? [{ label: t('admin.settings.title'), icon: 'i-lucide-settings', to: localePath('/admin/settings') }]
+    : [])
+])
+
 async function logout() {
   // Better Auth's sign-out rejects with 415/400 unless given a real JSON body.
   await $fetch('/api/auth/sign-out', { method: 'POST', body: {} })
@@ -17,29 +33,42 @@ async function logout() {
 
 <template>
   <template v-if="isAuthenticated">
+    <UDropdownMenu :items="items">
+      <UButton
+        variant="ghost"
+        size="sm"
+        icon="i-lucide-user"
+        trailing-icon="i-lucide-chevron-down"
+        :aria-label="t('account.title')"
+      />
+    </UDropdownMenu>
     <UButton
+      color="error"
+      variant="subtle"
+      size="sm"
+      icon="i-lucide-log-out"
+      :aria-label="t('login.logout')"
+      @click="logout"
+    >
+      <span class="hidden sm:inline">{{ t('login.logout') }}</span>
+    </UButton>
+  </template>
+  <template v-else>
+    <UButton
+      v-if="canRegister"
       variant="ghost"
       size="sm"
-      icon="i-lucide-user"
-      :to="localePath('/account')"
-      :aria-label="t('account.title')"
+      icon="i-lucide-user-plus"
+      :label="t('register.title')"
+      :to="localePath('/register')"
     />
     <UButton
-      color="error"
+      color="primary"
       variant="subtle"
       size="sm"
-      icon="i-lucide-log-out"
-      :label="t('login.logout')"
-      @click="logout"
+      icon="i-lucide-log-in"
+      :label="t('login.title')"
+      :to="localePath('/login')"
     />
   </template>
-  <UButton
-    v-else
-    color="primary"
-    variant="subtle"
-    size="sm"
-    icon="i-lucide-log-in"
-    :label="t('login.title')"
-    :to="localePath('/login')"
-  />
 </template>
diff --git a/apps/app/app/components/BackButton.vue b/apps/app/app/components/BackButton.vue
new file mode 100644
index 0000000..19cc385
--- /dev/null
+++ b/apps/app/app/components/BackButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <!-- Nine pages carry the same return path, and the label only fits next to a title from `sm` up. -->
+  <UButton
+    variant="ghost"
+    icon="i-lucide-arrow-left"
+    :aria-label="t('dashboard.backToCreate')"
+    :to="localePath('/')"
+    class="shrink-0"
+  >
+    <span class="hidden sm:inline">{{ t('dashboard.backToCreate') }}</span>
+  </UButton>
+</template>
diff --git a/apps/app/app/components/LanguageSwitcher.vue b/apps/app/app/components/LanguageSwitcher.vue
index 64919c0..85ff111 100644
--- a/apps/app/app/components/LanguageSwitcher.vue
+++ b/apps/app/app/components/LanguageSwitcher.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
-const { locale, locales, setLocale } = useI18n()
+import type { DropdownMenuItem } from '@nuxt/ui'
 
-const items = computed(() => locales.value.map(l => ({ label: l.name ?? l.code, value: l.code })))
+const { t, locale, locales, setLocale } = useI18n()
 
 // `setLocale` is typed against the configured codes, not plain string: the value comes from `locales`, but the type has to say so.
 type LocaleCode = typeof locale.value
 
-const selected = computed({
-  get: () => locale.value,
-  set: (value: LocaleCode) => setLocale(value)
-})
+const current = computed(() => locales.value.find(entry => entry.code === locale.value))
+
+const items = computed<DropdownMenuItem[]>(() => locales.value.map(entry => ({
+  label: entry.name ?? entry.code,
+  type: 'checkbox' as const,
+  checked: entry.code === locale.value,
+  onSelect: () => setLocale(entry.code as LocaleCode)
+})))
 </script>
 
 <template>
-  <USelect
-    v-model="selected"
-    :items="items"
-    value-key="value"
-    size="sm"
-    class="w-28"
-  />
+  <!-- A menu rather than a select: the trigger collapses to its icon on a phone, where a select has to keep room for its longest language name. -->
+  <UDropdownMenu :items="items">
+    <UButton
+      variant="ghost"
+      size="sm"
+      icon="i-lucide-languages"
+      :aria-label="t('nav.language')"
+    >
+      <span class="hidden sm:inline">{{ current?.name ?? locale }}</span>
+    </UButton>
+  </UDropdownMenu>
 </template>
diff --git a/apps/app/app/components/LegalTemplateDialog.vue b/apps/app/app/components/LegalTemplateDialog.vue
index 982df6c..d469cbf 100644
--- a/apps/app/app/components/LegalTemplateDialog.vue
+++ b/apps/app/app/components/LegalTemplateDialog.vue
@@ -165,13 +165,13 @@ function apply() {
               min="1"
               :disabled="!included[key]"
               placeholder="30"
-              class="w-28"
+              class="w-24 shrink-0 sm:w-28"
             />
             <USelect
               v-model="durations[key]!.unit"
               :items="unitItems"
               :disabled="!included[key]"
-              class="w-40"
+              class="min-w-0 flex-1 sm:w-40 sm:flex-none"
             />
           </div>
 
@@ -213,11 +213,11 @@ function apply() {
     </template>
 
     <template #footer>
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p class="text-xs text-muted">
           {{ t('admin.legal.template.hint') }}
         </p>
-        <div class="flex shrink-0 gap-2">
+        <div class="flex shrink-0 justify-end gap-2">
           <UButton
             color="neutral"
             variant="ghost"
diff --git a/apps/app/app/components/UnlimitedNumberField.vue b/apps/app/app/components/UnlimitedNumberField.vue
index 226911f..fa801de 100644
--- a/apps/app/app/components/UnlimitedNumberField.vue
+++ b/apps/app/app/components/UnlimitedNumberField.vue
@@ -22,13 +22,13 @@ watch(numberValue, (value) => {
 
 <template>
   <UFormField :label="label">
-    <div class="flex items-center gap-3">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
       <UInput
         v-model.number="numberValue"
         type="number"
         :min="min ?? 0"
         :disabled="unlimited"
-        class="w-full"
+        class="min-w-40 flex-1"
       />
       <div class="flex shrink-0 items-center gap-1.5">
         <USwitch v-model="unlimited" />
diff --git a/apps/app/app/pages/account.vue b/apps/app/app/pages/account.vue
index 4d82f03..e2ab37c 100644
--- a/apps/app/app/pages/account.vue
+++ b/apps/app/app/pages/account.vue
@@ -232,16 +232,11 @@ async function deleteAccount() {
 
 <template>
   <div class="mx-auto max-w-xl p-4">
-    <div class="mb-6 flex items-center justify-between">
+    <div class="mb-6 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('account.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
 
     <UAlert
@@ -441,7 +436,7 @@ async function deleteAccount() {
         <!-- Enrollment: step 1, ask for password -->
         <div
           v-if="!user?.twoFactorEnabled && twoFactorStep === 'idle'"
-          class="flex items-end gap-2"
+          class="flex flex-col gap-2 sm:flex-row sm:items-end"
         >
           <UFormField
             :label="t('account.twoFactor.passwordToEnable')"
@@ -455,6 +450,8 @@ async function deleteAccount() {
             />
           </UFormField>
           <UButton
+            block
+            class="sm:w-auto"
             :loading="twoFactorLoading"
             :disabled="!enrollPassword"
             :label="t('account.twoFactor.enable')"
@@ -473,9 +470,9 @@ async function deleteAccount() {
           <img
             :src="totpQrDataUrl"
             :alt="t('account.twoFactor.title')"
-            class="size-48 rounded-lg border border-default p-2"
+            class="size-48 max-w-full rounded-lg border border-default p-2"
           >
-          <p class="font-mono text-xs text-muted">
+          <p class="font-mono text-xs break-all text-muted">
             {{ t('account.twoFactor.manualEntry') }}: {{ totpSecret }}
           </p>
 
@@ -551,7 +548,7 @@ async function deleteAccount() {
             />
           </div>
 
-          <div class="flex items-end gap-2">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-end">
             <UFormField
               :label="t('account.twoFactor.passwordToRegenerate')"
               class="flex-1"
@@ -564,7 +561,9 @@ async function deleteAccount() {
               />
             </UFormField>
             <UButton
+              block
               variant="subtle"
+              class="sm:w-auto"
               :loading="regenerating"
               :disabled="!regeneratePassword"
               :label="t('account.twoFactor.regenerate')"
@@ -580,7 +579,7 @@ async function deleteAccount() {
           </p>
           <div
             v-else
-            class="flex items-end gap-2 border-t border-default pt-4"
+            class="flex flex-col gap-2 border-t border-default pt-4 sm:flex-row sm:items-end"
           >
             <UFormField
               :label="t('account.twoFactor.passwordToDisable')"
@@ -594,8 +593,10 @@ async function deleteAccount() {
               />
             </UFormField>
             <UButton
+              block
               color="error"
               variant="subtle"
+              class="sm:w-auto"
               :loading="disabling"
               :disabled="!disablePassword"
               :label="t('account.twoFactor.disable')"
diff --git a/apps/app/app/pages/admin/allowed-ips.vue b/apps/app/app/pages/admin/allowed-ips.vue
index f767ab8..beca07b 100644
--- a/apps/app/app/pages/admin/allowed-ips.vue
+++ b/apps/app/app/pages/admin/allowed-ips.vue
@@ -69,16 +69,11 @@ function formatDate(value: string) {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.allowedIps.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -153,12 +148,12 @@ function formatDate(value: string) {
         v-for="entry in allowedIps"
         :key="entry.id"
       >
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <p class="font-mono text-sm">
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <p class="font-mono text-sm break-all">
               {{ entry.ip }}
             </p>
-            <p class="text-xs text-muted">
+            <p class="text-xs break-words text-muted">
               <span v-if="entry.label">{{ entry.label }} · </span>{{ t('admin.allowedIps.addedAt', { date: formatDate(entry.createdAt) }) }}
             </p>
           </div>
@@ -166,6 +161,7 @@ function formatDate(value: string) {
             color="error"
             variant="ghost"
             icon="i-lucide-trash-2"
+            class="shrink-0"
             :loading="removingId === entry.id"
             @click="remove(entry.id)"
           />
diff --git a/apps/app/app/pages/admin/banned-ips.vue b/apps/app/app/pages/admin/banned-ips.vue
index 3ceccf4..f2ae226 100644
--- a/apps/app/app/pages/admin/banned-ips.vue
+++ b/apps/app/app/pages/admin/banned-ips.vue
@@ -76,16 +76,11 @@ function isExpired(ip: BannedIp) {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.bannedIps.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -169,10 +164,10 @@ function isExpired(ip: BannedIp) {
         v-for="entry in bannedIps"
         :key="entry.id"
       >
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <div class="flex items-center gap-2">
-              <p class="font-mono text-sm">
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="flex flex-wrap items-center gap-2">
+              <p class="font-mono text-sm break-all">
                 {{ entry.ip }}
               </p>
               <UBadge
@@ -200,7 +195,7 @@ function isExpired(ip: BannedIp) {
                 {{ t('admin.bannedIps.expiresAt', { date: formatDate(entry.expiresAt) }) }}
               </UBadge>
             </div>
-            <p class="text-xs text-muted">
+            <p class="text-xs break-words text-muted">
               {{ entry.reason }} · {{ t('admin.bannedIps.bannedAt', { date: formatDate(entry.bannedAt) }) }}
             </p>
           </div>
@@ -208,6 +203,7 @@ function isExpired(ip: BannedIp) {
             color="error"
             variant="ghost"
             icon="i-lucide-trash-2"
+            class="shrink-0"
             :loading="removingId === entry.id"
             @click="remove(entry.id)"
           />
diff --git a/apps/app/app/pages/admin/invitations.vue b/apps/app/app/pages/admin/invitations.vue
index 9650cac..cfeb342 100644
--- a/apps/app/app/pages/admin/invitations.vue
+++ b/apps/app/app/pages/admin/invitations.vue
@@ -80,16 +80,11 @@ function formatDate(value: string) {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.invitations.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -173,9 +168,9 @@ function formatDate(value: string) {
         v-for="entry in invitations"
         :key="entry.id"
       >
-        <div class="flex items-center justify-between gap-4">
+        <div class="flex items-start justify-between gap-3">
           <div class="min-w-0">
-            <div class="flex items-center gap-2">
+            <div class="flex flex-wrap items-center gap-2">
               <p class="truncate text-sm">
                 {{ entry.email }}
               </p>
@@ -187,7 +182,7 @@ function formatDate(value: string) {
                 {{ t(`admin.invitations.states.${entry.state}`) }}
               </UBadge>
             </div>
-            <p class="text-xs text-muted">
+            <p class="text-xs break-words text-muted">
               <span v-if="entry.invitedByEmail">{{ t('admin.invitations.invitedBy', { email: entry.invitedByEmail }) }} · </span>
               <span v-if="entry.state === 'pending'">{{ t('admin.invitations.expiresAt', { date: formatDate(entry.expiresAt) }) }}</span>
               <span v-else-if="entry.acceptedAt">{{ t('admin.invitations.acceptedAt', { date: formatDate(entry.acceptedAt) }) }}</span>
@@ -199,6 +194,7 @@ function formatDate(value: string) {
             color="error"
             variant="ghost"
             icon="i-lucide-x"
+            class="shrink-0"
             :loading="revokingId === entry.id"
             @click="revoke(entry.id)"
           />
diff --git a/apps/app/app/pages/admin/legal.vue b/apps/app/app/pages/admin/legal.vue
index 5361451..c135235 100644
--- a/apps/app/app/pages/admin/legal.vue
+++ b/apps/app/app/pages/admin/legal.vue
@@ -188,16 +188,11 @@ function formatDate(value: string) {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.legal.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -205,18 +200,20 @@ function formatDate(value: string) {
       {{ t('admin.legal.description') }}
     </p>
 
-    <div class="mb-4 flex flex-wrap items-center gap-3">
+    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
       <UTabs
         v-model="slug"
         :items="slugItems"
         :content="false"
         size="sm"
+        class="w-full sm:w-auto"
       />
       <UTabs
         v-model="editedLocale"
         :items="localeItems"
         :content="false"
         size="sm"
+        class="w-full sm:w-auto"
       />
     </div>
 
@@ -244,7 +241,7 @@ function formatDate(value: string) {
       </span>
     </div>
 
-    <!-- Both panes carry the same height, sized so the page fits the viewport: the header controls are fixed, and a page that scrolls slides its content under them. -->
+    <!-- Both panes carry the same height, sized so the page fits the viewport: the header controls are fixed, and a page that scrolls slides its content under them. Stacked below `lg`, each takes half the viewport instead. -->
     <div class="grid gap-4 lg:grid-cols-2">
       <div>
         <p class="mb-1.5 text-xs font-medium text-muted">
@@ -255,14 +252,14 @@ function formatDate(value: string) {
           v-model="content"
           :placeholder="t('admin.legal.placeholder')"
           class="w-full font-mono"
-          :ui="{ base: 'text-xs h-[calc(100vh-28rem)] min-h-80 resize-none' }"
+          :ui="{ base: 'text-xs h-[50vh] min-h-64 resize-none lg:h-[calc(100vh-28rem)] lg:min-h-80' }"
         />
       </div>
       <div>
         <p class="mb-1.5 text-xs font-medium text-muted">
           {{ t('admin.legal.preview') }}
         </p>
-        <div class="h-[calc(100vh-28rem)] min-h-80 overflow-y-auto rounded-md border border-default p-4">
+        <div class="h-[50vh] min-h-64 overflow-y-auto rounded-md border border-default p-4 lg:h-[calc(100vh-28rem)] lg:min-h-80">
           <LegalDocument
             v-if="previewDocument"
             :value="previewDocument"
@@ -286,7 +283,7 @@ function formatDate(value: string) {
       class="mt-4"
     />
 
-    <div class="mt-4 flex items-center gap-2">
+    <div class="mt-4 flex flex-wrap items-center gap-2">
       <UButton
         icon="i-lucide-save"
         :loading="saving"
diff --git a/apps/app/app/pages/admin/settings.vue b/apps/app/app/pages/admin/settings.vue
index 881309d..2b87b1e 100644
--- a/apps/app/app/pages/admin/settings.vue
+++ b/apps/app/app/pages/admin/settings.vue
@@ -78,16 +78,11 @@ async function save() {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.settings.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
diff --git a/apps/app/app/pages/admin/storage.vue b/apps/app/app/pages/admin/storage.vue
index 6644aa6..194c468 100644
--- a/apps/app/app/pages/admin/storage.vue
+++ b/apps/app/app/pages/admin/storage.vue
@@ -178,16 +178,11 @@ function formatDate(value: string) {
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.storage.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -210,7 +205,7 @@ function formatDate(value: string) {
       class="space-y-6"
     >
       <UCard>
-        <div class="mb-4 flex items-center justify-between gap-4">
+        <div class="mb-4 flex items-center justify-between gap-3">
           <h2 class="text-sm font-medium">
             {{ t('admin.storage.quotasSection') }}
           </h2>
@@ -229,9 +224,9 @@ function formatDate(value: string) {
             :key="bar.key"
             class="space-y-1.5"
           >
-            <div class="flex items-baseline justify-between gap-4 text-sm">
-              <span>{{ bar.label }}</span>
-              <span class="tabular-nums text-muted">{{ bar.value }}<span v-if="bar.limit"> / {{ bar.limit }}</span></span>
+            <div class="flex items-baseline justify-between gap-3 text-sm">
+              <span class="min-w-0">{{ bar.label }}</span>
+              <span class="shrink-0 tabular-nums text-muted">{{ bar.value }}<span v-if="bar.limit"> / {{ bar.limit }}</span></span>
             </div>
             <UProgress
               v-if="bar.percent !== null"
@@ -271,9 +266,9 @@ function formatDate(value: string) {
             :key="bar.key"
             class="space-y-1.5"
           >
-            <div class="flex items-baseline justify-between gap-4 text-sm">
-              <span>{{ bar.label }} <span class="text-xs text-muted">· {{ bar.hint }}</span></span>
-              <span class="tabular-nums text-muted">{{ bar.value }}</span>
+            <div class="flex items-baseline justify-between gap-3 text-sm">
+              <span class="min-w-0">{{ bar.label }} <span class="text-xs text-muted">· {{ bar.hint }}</span></span>
+              <span class="shrink-0 tabular-nums text-muted">{{ bar.value }}</span>
             </div>
             <UProgress
               :model-value="bar.percent ?? 0"
@@ -286,7 +281,7 @@ function formatDate(value: string) {
       </UCard>
 
       <UCard v-if="reclaimableBar">
-        <div class="mb-1 flex items-center justify-between gap-4">
+        <div class="mb-1 flex items-center justify-between gap-3">
           <h2 class="text-sm font-medium">
             {{ t('admin.storage.reclaimableSection') }}
           </h2>
@@ -318,9 +313,9 @@ function formatDate(value: string) {
           class="mb-4"
         />
         <div class="space-y-1.5">
-          <div class="flex items-baseline justify-between gap-4 text-sm">
-            <span>{{ reclaimableBar.label }} <span class="text-xs text-muted">· {{ reclaimableBar.hint }}</span></span>
-            <span class="tabular-nums text-muted">{{ reclaimableBar.value }}</span>
+          <div class="flex items-baseline justify-between gap-3 text-sm">
+            <span class="min-w-0">{{ reclaimableBar.label }} <span class="text-xs text-muted">· {{ reclaimableBar.hint }}</span></span>
+            <span class="shrink-0 tabular-nums text-muted">{{ reclaimableBar.value }}</span>
           </div>
           <UProgress
             :model-value="reclaimableBar.percent ?? 0"
@@ -344,9 +339,9 @@ function formatDate(value: string) {
             :key="bar.key"
             class="space-y-1.5"
           >
-            <div class="flex items-baseline justify-between gap-4 text-sm">
-              <span>{{ bar.label }}</span>
-              <span class="tabular-nums text-muted">{{ bar.value }}<span v-if="bar.limit"> / {{ bar.limit }}</span></span>
+            <div class="flex items-baseline justify-between gap-3 text-sm">
+              <span class="min-w-0">{{ bar.label }}</span>
+              <span class="shrink-0 tabular-nums text-muted">{{ bar.value }}<span v-if="bar.limit"> / {{ bar.limit }}</span></span>
             </div>
             <UProgress
               v-if="bar.percent !== null"
@@ -386,7 +381,7 @@ function formatDate(value: string) {
             :key="bar.key"
             class="space-y-1.5"
           >
-            <div class="flex items-baseline justify-between gap-4 text-sm">
+            <div class="flex items-baseline justify-between gap-3 text-sm">
               <span class="truncate">{{ bar.label }} <span class="text-xs text-muted">· {{ bar.hint }}</span></span>
               <span class="shrink-0 tabular-nums text-muted">{{ bar.value }}</span>
             </div>
@@ -411,13 +406,13 @@ function formatDate(value: string) {
           v-if="report.database"
           class="space-y-2 text-sm"
         >
-          <div class="flex items-baseline justify-between gap-4">
-            <span>{{ t('admin.storage.databaseTotal') }}</span>
-            <span class="tabular-nums text-muted">{{ formatBytes(report.database.totalBytes) }}</span>
+          <div class="flex items-baseline justify-between gap-3">
+            <span class="min-w-0">{{ t('admin.storage.databaseTotal') }}</span>
+            <span class="shrink-0 tabular-nums text-muted">{{ formatBytes(report.database.totalBytes) }}</span>
           </div>
-          <div class="flex items-baseline justify-between gap-4">
-            <span>{{ t('admin.storage.databasePastesTable') }}</span>
-            <span class="tabular-nums text-muted">{{ formatBytes(report.database.pastesTableBytes) }}</span>
+          <div class="flex items-baseline justify-between gap-3">
+            <span class="min-w-0">{{ t('admin.storage.databasePastesTable') }}</span>
+            <span class="shrink-0 tabular-nums text-muted">{{ formatBytes(report.database.pastesTableBytes) }}</span>
           </div>
         </div>
         <p
diff --git a/apps/app/app/pages/admin/users.vue b/apps/app/app/pages/admin/users.vue
index e80300e..d9644b8 100644
--- a/apps/app/app/pages/admin/users.vue
+++ b/apps/app/app/pages/admin/users.vue
@@ -157,16 +157,11 @@ const roleColor = { user: 'neutral', admin: 'info', super_admin: 'warning' } as
 
 <template>
   <div class="mx-auto max-w-5xl p-4">
-    <div class="mb-2 flex items-center justify-between">
+    <div class="mb-2 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('admin.users.title') }}
       </h1>
-      <UButton
-        variant="ghost"
-        icon="i-lucide-arrow-left"
-        :label="t('dashboard.backToCreate')"
-        :to="localePath('/')"
-      />
+      <BackButton />
     </div>
     <AdminNav />
 
@@ -210,9 +205,10 @@ const roleColor = { user: 'neutral', admin: 'info', super_admin: 'warning' } as
         v-for="target in users"
         :key="target.id"
       >
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <div class="flex items-center gap-2">
+        <!-- The menu keeps its corner at every width; only the role select, as wide as a phone on its own, drops to a row of its own. -->
+        <div class="flex flex-wrap items-start gap-x-3 gap-y-3 sm:items-center">
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-2">
               <p class="text-sm font-medium">
                 {{ target.name }}
               </p>
@@ -233,33 +229,32 @@ const roleColor = { user: 'neutral', admin: 'info', super_admin: 'warning' } as
                 2FA
               </UBadge>
             </div>
-            <p class="text-xs text-muted">
+            <p class="text-xs break-words text-muted">
               {{ target.email }} · {{ t('admin.users.joined', { date: formatDate(target.createdAt) }) }} ·
               {{ t('admin.users.pastesSummary', { count: target.pastesCount, reclaimable: target.reclaimablePastesCount }) }}
             </p>
           </div>
-          <div class="flex items-center gap-2">
-            <USelect
-              v-if="canChangeRole(target)"
-              :model-value="target.role"
-              :items="ROLE_OPTIONS"
-              size="sm"
-              class="w-36"
-              :loading="updatingId === target.id"
-              @update:model-value="(role) => changeRole(target, role as AdminUser['role'])"
+          <USelect
+            v-if="canChangeRole(target)"
+            :model-value="target.role"
+            :items="ROLE_OPTIONS"
+            size="sm"
+            class="order-last w-full sm:order-none sm:w-36"
+            :loading="updatingId === target.id"
+            @update:model-value="(role) => changeRole(target, role as AdminUser['role'])"
+          />
+          <UDropdownMenu
+            v-if="menuItems(target).length"
+            :items="menuItems(target)"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-ellipsis-vertical"
+              class="shrink-0"
+              :aria-label="t('admin.users.menu.label', { email: target.email })"
             />
-            <UDropdownMenu
-              v-if="menuItems(target).length"
-              :items="menuItems(target)"
-            >
-              <UButton
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-ellipsis-vertical"
-                :aria-label="t('admin.users.menu.label', { email: target.email })"
-              />
-            </UDropdownMenu>
-          </div>
+          </UDropdownMenu>
         </div>
       </UCard>
     </div>
diff --git a/apps/app/app/pages/dashboard.vue b/apps/app/app/pages/dashboard.vue
index 75462cf..3bc76f5 100644
--- a/apps/app/app/pages/dashboard.vue
+++ b/apps/app/app/pages/dashboard.vue
@@ -48,25 +48,11 @@ function formatDate(value: string) {
 
 <template>
   <div class="mx-auto max-w-3xl p-4">
-    <div class="mb-6 flex items-center justify-between">
+    <div class="mb-6 flex items-center justify-between gap-3">
       <h1 class="text-xl font-semibold">
         {{ t('dashboard.title') }}
       </h1>
-      <div class="flex items-center gap-2">
-        <UButton
-          v-if="user && ['admin', 'super_admin'].includes(user.role)"
-          variant="ghost"
-          icon="i-lucide-settings"
-          :label="t('admin.settings.title')"
-          :to="localePath('/admin/settings')"
-        />
-        <UButton
-          variant="ghost"
-          icon="i-lucide-arrow-left"
-          :label="t('dashboard.backToCreate')"
-          :to="localePath('/')"
-        />
-      </div>
+      <BackButton />
     </div>
 
     <div
@@ -94,14 +80,15 @@ function formatDate(value: string) {
         v-for="paste in pastes"
         :key="paste.id"
       >
-        <div class="flex items-center justify-between gap-4">
-          <div class="flex items-center gap-3">
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex min-w-0 items-start gap-3">
             <UIcon
               :name="paste.kind === 'file' ? 'i-lucide-paperclip' : 'i-lucide-file-text'"
-              class="size-5 text-muted"
+              class="mt-0.5 size-5 shrink-0 text-muted"
             />
-            <div>
-              <div class="flex items-center gap-2 text-sm">
+            <div class="min-w-0">
+              <!-- Four badges never fit one phone line, so they wrap under the kind instead of pushing the delete button off. -->
+              <div class="flex flex-wrap items-center gap-2 text-sm">
                 <span>{{ paste.kind === 'file' ? t('create.kindFile') : t('create.kindText') }}</span>
                 <UBadge
                   v-if="paste.fileSize !== null"
@@ -156,6 +143,7 @@ function formatDate(value: string) {
             color="error"
             variant="ghost"
             icon="i-lucide-trash-2"
+            class="shrink-0"
             :loading="deletingId === paste.id"
             @click="remove(paste.id)"
           />
diff --git a/apps/app/app/pages/index.vue b/apps/app/app/pages/index.vue
index 284d6bd..f53ad0f 100644
--- a/apps/app/app/pages/index.vue
+++ b/apps/app/app/pages/index.vue
@@ -181,23 +181,13 @@ function reset() {
   <div class="flex flex-1 items-center justify-center p-4">
     <UCard class="w-full max-w-2xl">
       <template #header>
-        <div class="flex items-center justify-between">
-          <div>
-            <h1 class="text-xl font-semibold">
-              shhh
-            </h1>
-            <p class="text-sm text-muted">
-              {{ t('create.subtitle') }}
-            </p>
-          </div>
-          <UButton
-            v-if="isAuthenticated"
-            variant="ghost"
-            size="sm"
-            icon="i-lucide-list"
-            :label="t('dashboard.title')"
-            :to="localePath('/dashboard')"
-          />
+        <div>
+          <h1 class="text-xl font-semibold">
+            shhh
+          </h1>
+          <p class="text-sm text-muted">
+            {{ t('create.subtitle') }}
+          </p>
         </div>
       </template>
 
@@ -230,13 +220,15 @@ function reset() {
           :title="t('create.result.title')"
           :description="t('create.result.warning')"
         />
-        <div class="flex items-center gap-2">
+        <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
           <UInput
             :model-value="resultUrl"
             readonly
             class="w-full font-mono text-xs"
           />
           <UButton
+            block
+            class="sm:w-auto"
             :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
             :label="copied ? t('create.result.copied') : t('create.result.copy')"
             @click="copyLink"
@@ -259,7 +251,7 @@ function reset() {
           :description="t('create.result.emailFailedHint')"
         />
 
-        <div class="flex items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
           <UButton
             variant="subtle"
             icon="i-lucide-mail"
@@ -320,7 +312,7 @@ function reset() {
           autocomplete="new-password"
         />
 
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid gap-4 sm:grid-cols-2">
           <UFormField :label="t('create.expiresInDays')">
             <UInput
               v-model.number="expiresInDaysInput"
diff --git a/apps/app/app/pages/legal/[slug].vue b/apps/app/app/pages/legal/[slug].vue
index 35faba0..82ebb86 100644
--- a/apps/app/app/pages/legal/[slug].vue
+++ b/apps/app/app/pages/legal/[slug].vue
@@ -9,7 +9,6 @@ interface LegalDocumentResponse {
 }
 
 const { t, locale } = useI18n()
-const localePath = useLocalePath()
 const route = useRoute()
 
 const slug = computed(() => String(route.params.slug))
@@ -35,12 +34,8 @@ const updatedAt = computed(() =>
 
 <template>
   <div class="mx-auto max-w-2xl p-4 pb-16">
-    <UButton
-      variant="ghost"
+    <BackButton
       size="sm"
-      icon="i-lucide-arrow-left"
-      :label="t('dashboard.backToCreate')"
-      :to="localePath('/')"
       class="mb-6"
     />
 
diff --git a/apps/app/app/pages/login.vue b/apps/app/app/pages/login.vue
index a58991a..3387fb7 100644
--- a/apps/app/app/pages/login.vue
+++ b/apps/app/app/pages/login.vue
@@ -72,9 +72,12 @@ async function submitCode() {
   <div class="flex flex-1 items-center justify-center p-4">
     <UCard class="w-full max-w-sm">
       <template #header>
-        <h1 class="text-xl font-semibold">
-          {{ needsTwoFactor ? t('login.twoFactor.title') : t('login.title') }}
-        </h1>
+        <div class="flex items-center justify-between gap-3">
+          <h1 class="text-xl font-semibold">
+            {{ needsTwoFactor ? t('login.twoFactor.title') : t('login.title') }}
+          </h1>
+          <BackButton size="sm" />
+        </div>
       </template>
 
       <UForm
diff --git a/apps/app/app/pages/p/[id].vue b/apps/app/app/pages/p/[id].vue
index 33f467a..c382bfd 100644
--- a/apps/app/app/pages/p/[id].vue
+++ b/apps/app/app/pages/p/[id].vue
@@ -136,7 +136,8 @@ async function copyText() {
         class="space-y-4"
       >
         <template v-if="decryptedText">
-          <pre class="max-h-96 overflow-auto rounded-lg bg-elevated p-4 text-sm whitespace-pre-wrap">{{ decryptedText }}</pre>
+          <!-- `break-words` as well as the wrap: a secret is often one long unbroken token. -->
+          <pre class="max-h-96 overflow-auto rounded-lg bg-elevated p-4 text-sm break-words whitespace-pre-wrap">{{ decryptedText }}</pre>
           <UButton
             :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
             :label="copied ? t('create.result.copied') : t('read.copyText')"
@@ -150,6 +151,8 @@ async function copyText() {
             :to="decryptedFile.url"
             :download="decryptedFile.name"
             external
+            class="max-w-full"
+            :ui="{ label: 'truncate' }"
           />
         </template>
       </div>
diff --git a/apps/app/app/pages/register.vue b/apps/app/app/pages/register.vue
index 1e1c4bf..b4829ce 100644
--- a/apps/app/app/pages/register.vue
+++ b/apps/app/app/pages/register.vue
@@ -76,9 +76,12 @@ async function submit(event: FormSubmitEvent<typeof state>) {
   <div class="flex flex-1 items-center justify-center p-4">
     <UCard class="w-full max-w-sm">
       <template #header>
-        <h1 class="text-xl font-semibold">
-          {{ t('register.title') }}
-        </h1>
+        <div class="flex items-center justify-between gap-3">
+          <h1 class="text-xl font-semibold">
+            {{ t('register.title') }}
+          </h1>
+          <BackButton size="sm" />
+        </div>
       </template>
 
       <UAlert
diff --git a/apps/app/i18n/locales/en.json b/apps/app/i18n/locales/en.json
index 2ce8be1..21c2759 100644
--- a/apps/app/i18n/locales/en.json
+++ b/apps/app/i18n/locales/en.json
@@ -471,7 +471,8 @@
     }
   },
   "nav": {
-    "documentation": "Documentation"
+    "documentation": "Documentation",
+    "language": "Language"
   },
   "seo": {
     "title": "shhh — share a secret that expires",
diff --git a/apps/app/i18n/locales/fr.json b/apps/app/i18n/locales/fr.json
index a7598e3..29963b1 100644
--- a/apps/app/i18n/locales/fr.json
+++ b/apps/app/i18n/locales/fr.json
@@ -471,7 +471,8 @@
     }
   },
   "nav": {
-    "documentation": "Documentation"
+    "documentation": "Documentation",
+    "language": "Langue"
   },
   "seo": {
     "title": "shhh — partagez un secret qui expire",

From 52acc8aef1b3a14efbb3d6e1285dd98e1271b141 Mon Sep 17 00:00:00 2001
From: Thomas <28439359+thoda-dev@users.noreply.github.com>
Date: Mon, 31 Aug 2026 18:05:19 +0200
Subject: [PATCH 2/2] feat(ui): offer the way home from a paste page too

---
 apps/app/app/pages/p/[id].vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/app/app/pages/p/[id].vue b/apps/app/app/pages/p/[id].vue
index c382bfd..623ab54 100644
--- a/apps/app/app/pages/p/[id].vue
+++ b/apps/app/app/pages/p/[id].vue
@@ -109,9 +109,13 @@ async function copyText() {
   <div class="flex flex-1 items-center justify-center p-4">
     <UCard class="w-full max-w-2xl">
       <template #header>
-        <h1 class="text-xl font-semibold">
-          shhh
-        </h1>
+        <div class="flex items-center justify-between gap-3">
+          <h1 class="text-xl font-semibold">
+            shhh
+          </h1>
+          <!-- The one page a reader may reach without ever having used the instance, so it also offers the way in. -->
+          <BackButton size="sm" />
+        </div>
       </template>
 
       <div v-if="missingKey">