Improved key success message layout for mobile, using global 'now' to prevent hydration mismatches.

components/header/header.vue

@@ -258,7 +258,7 @@ const theme = ref(pageContext.env.theme);
 
 const user = pageContext.user;
 const primaryStash = pageContext.assets?.primaryStash;
-const unseen = ref(pageContext.meta.unseenNotifications);
+const unseen = ref(pageContext.assets?.unseenNotifications);
 const query = ref(pageContext.urlParsed.search.q || '');
 const allowLogin = pageContext.env.allowLogin;
 const searchFocused = ref(false);

pages/auth/keys/+Page.vue

@@ -22,14 +22,13 @@
 				v-if="newKey"
 				class="newkey"
 			>
-				<p class="key-info">
+				<p class="key-info">Successfully generated key with identifier <strong class="newkey-identifier ellipsis">{{ newKey.identifier }}</strong>:</p>
-					Your new key identified by <strong>{{ newKey.identifier }}</strong> is
+
-					<input
+				<input
-						:value="newKey.key"
+					:value="newKey.key"
-						class="input"
+					class="input ellipsis"
-						@click="copyKey"
+					@click="copyKey"
-					>
+				>
-				</p>
 
 				<p class="key-info">Please store this key securely, you will <strong>not</strong> be able to retrieve it later. If you lose it, you must generate a new key.</p>
 			</div>
@@ -61,7 +60,7 @@
 							<time
 								v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
 								:datetime="key.createdAt.toISOString()"
-							>{{ formatDistanceToNowStrict(key.createdAt) }} ago</time>
+							>{{ formatDistanceStrict(key.createdAt, now) }} ago</time>
 						</span>
 
 						<span class="key-value key-used">
@@ -71,7 +70,7 @@
 								<time
 									v-tooltip="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
 									:datetime="key.lastUsedAt.toISOString()"
-								>{{ formatDistanceToNowStrict(key.lastUsedAt) }} ago</time>
+								>{{ formatDistanceStrict(key.lastUsedAt, now) }} ago</time>
 							</template>
 
 							<template v-else>Never</template>
@@ -97,12 +96,13 @@
 
 <script setup>
 import { ref, inject } from 'vue';
-import { format, formatDistanceToNowStrict } from 'date-fns';
+import { format, formatDistanceStrict } from 'date-fns';
 
 import { get, post, del } from '#/src/api.js';
 import events from '#/src/events.js';
 
 const pageContext = inject('pageContext');
+const now = pageContext.meta.now;
 const user = pageContext.user;
 const keys = ref(pageContext.pageProps.keys);
 const newKey = ref(null);
@@ -242,8 +242,10 @@ function copyKey(event) {
 }
 
 .newkey {
+	max-width: 100%;
 	display: inline-block;
-	padding: .5rem 1rem;
+	box-sizing: border-box;
+	padding: .5rem .75rem;
 	margin-bottom: 1rem;
 	background: var(--enabled-background);
 	border: solid 1px var(--success);
@@ -252,13 +254,23 @@ function copyKey(event) {
 
 	.input {
 		width: 24rem;
-		padding: .25rem .75rem;
+		max-width: 100%;
+		padding: .25rem .5rem;
+		margin-bottom: .5rem;
 		font-weight: bold;
 	}
 }
 
+.newkey-identifier {
+	white-space: nowrap;
+}
+
 .key-info {
-	margin: 0 0 .5rem 0;
+	margin: 0;
+
+	&:not(:last-child) {
+		margin-bottom: .25rem;
+	}
 }
 
 .headers {

src/web/main.js

@@ -28,6 +28,7 @@ export default async function mainHandler(req, res, next) {
 			stashes,
 			primaryStash: stashes.find((stash) => stash.isPrimary),
 			templates,
+			unseenNotifications,
 		} : null,
 		env: {
 			theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light',
@@ -41,7 +42,7 @@ export default async function mainHandler(req, res, next) {
 			links: config.links,
 		},
 		meta: {
-			unseenNotifications,
+			now: new Date().toISOString(),
 		},
 	};