Fixed notifications overflow on small screens.

assets/css/tooltip.css

@@ -5,6 +5,11 @@
   top: 0;
   left: 0;
   outline: none;
+  max-width: 100%;
+}
+
+.v-popper__wrapper {
+	margin: 0 .25rem .25rem .25rem; /* arrow provides top clearance */
 }
 
 .v-popper__popper.v-popper__popper--hidden {

pages/auth/keys/+Page.vue

@@ -58,7 +58,7 @@
 							<Icon icon="plus-circle" />
 
 							<time
-								v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
+								v-tooltip="`Created ${format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')}`"
 								:datetime="key.createdAt.toISOString()"
 							>{{ formatDistanceStrict(key.createdAt, now) }} ago</time>
 						</span>
@@ -68,7 +68,7 @@
 
 							<template v-if="key.lastUsedAt">
 								<time
-									v-tooltip="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
+									v-tooltip="`Last used ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')} from IP ${key.lastUsedIp}`"
 									:datetime="key.lastUsedAt.toISOString()"
 								>{{ formatDistanceStrict(key.lastUsedAt, now) }} ago</time>
 							</template>