From 04abda572493a0f9fbb725b04e30f898fb0e840c Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Mon, 13 Jul 2026 00:14:03 +0200
Subject: [PATCH] Keep the landing editor off the .legal-editor class

The landing form reused LegalTextField, whose .legal-editor wrapper the
legal e2e selects by index (nth(1) = privacy policy). Placed before the
legal form it shifted those indices, so the test drove the imprint field
and the published privacy text never appeared. Generalize the component
to MarkdownTextField with a wrapperClass prop: legal keeps .legal-editor,
the landing editor uses .markdown-field. Verified locally: legal,
admin-users, admin-quotas packs green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EwZ4jR4KFAPvpjWevfUGX1
---
 apps/web/src/pages/AdminSettingsPage.tsx | 26 +++++++++++++++++-------
 apps/web/src/styles/base.css             |  9 +++++---
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/pages/AdminSettingsPage.tsx b/apps/web/src/pages/AdminSettingsPage.tsx
index 36ad39e..53cf5c9 100644
--- a/apps/web/src/pages/AdminSettingsPage.tsx
+++ b/apps/web/src/pages/AdminSettingsPage.tsx
@@ -274,7 +274,12 @@ function LandingSettingsForm({ settings }: { settings: InstanceSettings }): Reac
       <form onSubmit={(event) => void onSubmit(event)} noValidate>
         <FormError error={error} />
         <FormSuccess message={saved ? t('landing.saved') : null} />
-        <LegalTextField label={t('landing.label')} value={content} onChange={setContent} />
+        <MarkdownTextField
+          wrapperClass="markdown-field"
+          label={t('landing.label')}
+          value={content}
+          onChange={setContent}
+        />
         <button type="submit" className="button" disabled={busy}>
           {t('landing.save')}
         </button>
@@ -325,8 +330,8 @@ function LegalSettingsForm({ settings }: { settings: InstanceSettings }): React.
       <form onSubmit={(event) => void onSubmit(event)} noValidate>
         <FormError error={error} />
         <FormSuccess message={saved ? t('admin.save') : null} />
-        <LegalTextField label={t('admin.imprint')} value={imprint} onChange={setImprint} />
-        <LegalTextField label={t('admin.privacyPolicy')} value={privacy} onChange={setPrivacy} />
+        <MarkdownTextField label={t('admin.imprint')} value={imprint} onChange={setImprint} />
+        <MarkdownTextField label={t('admin.privacyPolicy')} value={privacy} onChange={setPrivacy} />
         <button type="submit" className="button" disabled={busy}>
           {t('admin.save')}
         </button>
@@ -335,20 +340,27 @@ function LegalSettingsForm({ settings }: { settings: InstanceSettings }): React.
   );
 }
 
-/** One Markdown textarea with a toggleable rendered preview. */
-function LegalTextField({
+/**
+ * One Markdown textarea with a toggleable rendered preview. `wrapperClass`
+ * distinguishes instances on the page: the legal editors keep `legal-editor`
+ * (the legal e2e selects them by that class and index), the landing editor
+ * gets its own so it does not shift those indices.
+ */
+function MarkdownTextField({
   label,
   value,
   onChange,
+  wrapperClass = 'legal-editor',
 }: {
   label: string;
   value: string;
   onChange: (value: string) => void;
+  wrapperClass?: string;
 }): React.JSX.Element {
   const { t } = useTranslation('legal');
   const [preview, setPreview] = useState(false);
   return (
-    <div className="legal-editor">
+    <div className={wrapperClass}>
       <Field label={label}>
         <textarea
           rows={10}
@@ -363,7 +375,7 @@ function LegalTextField({
       {preview && (
         // Same sanitizing pipeline as the api's public rendering — safe.
         <div
-          className="legal-editor__preview legal-page__body"
+          className={`${wrapperClass}__preview legal-page__body`}
           dangerouslySetInnerHTML={{ __html: docToHtml(markdownToDoc(value)) }}
         />
       )}
diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css
index ccf58aa..68e9b25 100644
--- a/apps/web/src/styles/base.css
+++ b/apps/web/src/styles/base.css
@@ -530,17 +530,20 @@ button {
   color: var(--color-text-muted);
 }
 
-.legal-editor {
+.legal-editor,
+.markdown-field {
   margin-bottom: var(--space-4);
 }
 
-.legal-editor textarea {
+.legal-editor textarea,
+.markdown-field textarea {
   width: 100%;
   font-family: var(--font-mono);
   font-size: 0.9rem;
 }
 
-.legal-editor__preview {
+.legal-editor__preview,
+.markdown-field__preview {
   margin-top: var(--space-3);
   padding: var(--space-3);
   border: 1px dashed var(--color-border);