From 9ae6186e660d0be1a65c337fb6d5f490e3b28318 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 28 Mar 2026 11:45:52 +0100
Subject: [PATCH] fix(#72): add mention chip styling for @mention rendering in
 comments

Mention spans injected via {@html} need global CSS since scoped styles
don't reach dynamically inserted content. Uses ink text on accent-bg
background for visible but subtle chip appearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/layout.css | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index e065f4a6..c907cd47 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -160,7 +160,28 @@
 	filter: invert(1);
 }
 
-/* ─── 7. Base styles ───────────────────────────────────────────────────────── */
+/* ─── 7. @mention chip ─────────────────────────────────────────────────────── */
+/*
+   Rendered by renderBody() via {@html ...} in CommentThread.svelte.
+   Must live in global CSS — Svelte scoped styles don't reach injected HTML.
+*/
+.mention {
+	display: inline;
+	color: var(--c-ink);
+	background-color: var(--c-accent-bg);
+	border-radius: 3px;
+	padding: 0 3px;
+	font-weight: 600;
+	font-style: normal;
+	cursor: default;
+	transition: background-color 0.15s ease;
+}
+
+.mention:hover {
+	background-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
+}
+
+/* ─── 8. Base styles ───────────────────────────────────────────────────────── */
 @layer base {
 	html {
 		overscroll-behavior: none;