Split footer to prevent overflows.

assets/css/states.css

@@ -65,3 +65,12 @@
 .capitalize {
 	text-transform: capitalize;
 }
+
+.hidden {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+}

components/footer/footer.vue

@@ -7,44 +7,61 @@ const { env } = pageContext;
 
 <template>
 	<footer class="footer">
-		<span class="footer-segment">© traxxx</span>
+		<div class="footer-row">
+			<a
+				v-if="env.links.matrix"
+				:href="env.links.matrix"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="footer-segment footer-link nolink matrix"
+			><Icon icon="matrix-full" /></a>
 
-		<a
-			v-if="env.links.matrix"
-			:href="env.links.matrix"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="footer-segment footer-link nolink matrix"
-		><Icon icon="matrix-full" /></a>
+			<a
+				v-if="env.links.discord"
+				:href="env.links.discord"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="footer-segment footer-link nolink discord"
+			><Icon icon="discord-full" /></a>
 
-		<a
-			v-if="env.links.discord"
-			:href="env.links.discord"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="footer-segment footer-link nolink discord"
-		><Icon icon="discord-full" /></a>
+			<a
+				v-if="env.links.content"
+				:href="env.links.content"
+				target="_blank"
+				class="footer-segment footer-link"
+			>Content Removal (DMCA)</a>
+		</div>
 
-		<a
-			v-if="env.links.content"
-			:href="env.links.content"
-			target="_blank"
-			class="footer-segment footer-link"
-		>Content Removal / DMCA</a>
+		<div class="footer-row">
+			<span class="footer-segment">© traxxx v{{ env.version }}</span>
+		</div>
 	</footer>
 </template>
 
 <style scoped>
 .footer {
 	display: flex;
-	justify-content: center;
-	align-items: stretch;
+	flex-direction: column;
 	background: var(--background-base-20);
 	box-shadow: inset 0 0 3px var(--shadow-weak-30);
-	font-size: .8rem;
+	font-size: .75rem;
 	font-weight: bold;
 }
 
+.footer-row {
+	display: flex;
+	justify-content: center;
+	align-items: stretch;
+
+	&:first-child .footer-segment {
+		padding-top: .6rem;
+	}
+
+	&:not(:first-child) {
+		border-top: solid 1px var(--glass-weak-30);
+	}
+}
+
 .footer-segment {
 	display: inline-flex;
 	align-items: center;

src/web/main.js

@@ -2,6 +2,7 @@ import config from 'config';
 import { renderPage } from 'vike/server';
 
 import { socials } from '../../common/actors.mjs';
+import pkg from '../../package.json' with { type: 'json' };
 import { fetchUnseenNotificationsCount } from '../alerts.js';
 import { fetchUserStashes } from '../stashes.js';
 import { fetchUserTemplates } from '../users.js';
@@ -38,6 +39,7 @@ export default async function mainHandler(req, res, next) {
 				}
 			: null,
 		env: {
+			version: pkg.version,
 			theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light',
 			scenesView: req.cookies.scenesView || 'list',
 			selectedTemplate: Number(req.cookies.selectedTemplate) || 0,