Fix: signup page services message shift to warning/successful messages

docs/css/custom.css

@@ -1085,10 +1085,12 @@
 /* ── Auth pages (login / signup) ───────────────────────────────────────── */
 
 .auth-page__services {
-	margin-top: 25px;
-	margin-bottom: -25px;
+	margin-top: 0;
+	margin-bottom: 0.75rem;
 	font-size: 0.78rem;
 	line-height: 1.45;
+	color: var(--foreground-color);
+	display: block;
 }
 
 .services-group__title {
@@ -1114,12 +1116,12 @@
 	background: var(--background-color);
 }
 
-/* Message banner — fixed height always reserved so the form never shifts */
+/* Message banner — always in flow; min-height reserves space so the form never shifts */
 .auth-message {
 	border-radius: 4px;
 	font-size: 0.82rem;
-	line-height: 1.3;
-	height: 1.8rem;
+	line-height: 1.4;
+	min-height: 1.8rem;
 	margin-bottom: 0.75rem;
 	box-sizing: border-box;
 	border: 1px solid transparent;
@@ -1127,10 +1129,7 @@
 	opacity: 0;
 	pointer-events: none;
 	transition: opacity 0.15s ease;
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	padding: 0 0.7rem;
+	padding: 0.25rem 0.7rem;
 }
 
 .auth-message.is-visible {
@@ -1138,6 +1137,12 @@
 	pointer-events: auto;
 }
 
+.auth-message--info {
+	background: transparent;
+	border-color: transparent;
+	color: var(--foreground-color);
+}
+
 .auth-message--error {
 	background: rgba(255, 61, 61, 0.1);
 	border: 1px solid rgba(255, 61, 61, 0.4);

layouts/signup/single.html

@@ -2,17 +2,23 @@
 <div class="auth-page">
 	<div class="auth-card">
 		<h1 class="auth-page__title">{{ .Title }}</h1>
-		{{ with site.GetPage "/services" }} {{ $registrationServices := slice }} {{ range
-		.Pages.ByWeight }} {{ if index .Params "registration-needed" }} {{ $registrationServices =
-		$registrationServices | append . }} {{ end }} {{ end }} {{ with $registrationServices }}
-		<p class="auth-page__services">
-			(By signing up, you will get access to the following services: {{ range $index, $service
-			:= . }}{{ if $index }}, {{ end }}<a href="{{ $service.RelPermalink }}"
-				>{{ $service.LinkTitle }}</a
-			>{{ end }})
-		</p>
-		{{ end }} {{ end }}
+		{{- with site.GetPage "/services" -}} {{- $registrationServices := slice -}} {{- range
+		.Pages.ByWeight -}} {{- if index .Params "registration-needed" -}} {{- $registrationServices
+		= $registrationServices | append . -}} {{- end -}} {{- end -}} {{- with
+		$registrationServices -}} {{- $serviceLinks := slice -}} {{- range . -}} {{- $serviceLinks =
+		$serviceLinks | append (printf `<a href="%s">%s</a>` .RelPermalink .LinkTitle) -}} {{- end
+		-}}
+		<div
+			id="auth-message"
+			class="auth-message auth-message--info is-visible"
+			aria-live="polite"
+		>
+			Signing up is giving you access to the following services: {{ delimit $serviceLinks ", "
+			| safeHTML }}
+		</div>
+		{{- end -}} {{- if not $registrationServices -}}
 		<div id="auth-message" class="auth-message" aria-live="polite"></div>
+		{{- end -}} {{- end -}}
 
 		<!-- ── STEP 1 — Account details ───────────────────────────────── -->
 		<form id="signup-form" class="auth-form" novalidate>
@@ -228,12 +234,21 @@
 		var pwdInput = document.getElementById('signup-password');
 		var eyeBtn = signupForm.querySelector('.auth-form__eye');
 
+		// Snapshot the server-rendered services notice so we can restore it after errors
+		var _servicesHTML = msgBox.innerHTML;
+		var _servicesClass = msgBox.className;
+
+		// Pin the box height to whatever the services text renders at, so switching
+		// to a one-line error message never shrinks the box and causes layout shift.
+		msgBox.style.minHeight = msgBox.offsetHeight + 'px';
+
 		function showMsg(text, type) {
 			msgBox.textContent = text;
 			msgBox.className = 'auth-message auth-message--' + type + ' is-visible';
 		}
 		function hideMsg() {
-			msgBox.className = 'auth-message';
+			msgBox.innerHTML = _servicesHTML;
+			msgBox.className = _servicesClass;
 		}
 
 		function setLoading(btn, on) {

static/css/custom.css

@@ -1085,10 +1085,12 @@
 /* ── Auth pages (login / signup) ───────────────────────────────────────── */
 
 .auth-page__services {
-	margin-top: 25px;
-	margin-bottom: -25px;
+	margin-top: 0;
+	margin-bottom: 0.75rem;
 	font-size: 0.78rem;
 	line-height: 1.45;
+	color: var(--foreground-color);
+	display: block;
 }
 
 .services-group__title {
@@ -1114,12 +1116,12 @@
 	background: var(--background-color);
 }
 
-/* Message banner — fixed height always reserved so the form never shifts */
+/* Message banner — always in flow; min-height reserves space so the form never shifts */
 .auth-message {
 	border-radius: 4px;
 	font-size: 0.82rem;
-	line-height: 1.3;
-	height: 1.8rem;
+	line-height: 1.4;
+	min-height: 1.8rem;
 	margin-bottom: 0.75rem;
 	box-sizing: border-box;
 	border: 1px solid transparent;
@@ -1127,10 +1129,7 @@
 	opacity: 0;
 	pointer-events: none;
 	transition: opacity 0.15s ease;
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	padding: 0 0.7rem;
+	padding: 0.25rem 0.7rem;
 }
 
 .auth-message.is-visible {
@@ -1138,6 +1137,12 @@
 	pointer-events: auto;
 }
 
+.auth-message--info {
+	background: transparent;
+	border-color: transparent;
+	color: var(--foreground-color);
+}
+
 .auth-message--error {
 	background: rgba(255, 61, 61, 0.1);
 	border: 1px solid rgba(255, 61, 61, 0.4);