From 78fba99c766e89b765deda35faac5c5816b9ba1f Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Wed, 26 Aug 2026 08:18:45 +0000
Subject: [PATCH] fix: list-style preview shows every level; rename the
 multilevel toggle

The preview drew a fixed three lines, and the toggle's label ("Show all
levels") read as a preview control when it switches chained numbering.
Preview now renders one line per defined level and scrolls past six;
the label says "Multilevel numbering (1, 1.1, 1.2.1)", matching the
numbering dropdown's notation.
---
 src/lib/components/StyleManagerDialog.svelte | 12 +++++++-----
 src/lib/i18n/locales/de.ts                   |  2 +-
 src/lib/i18n/locales/en.ts                   |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/StyleManagerDialog.svelte b/src/lib/components/StyleManagerDialog.svelte
index 2eff47d..90b736b 100644
--- a/src/lib/components/StyleManagerDialog.svelte
+++ b/src/lib/components/StyleManagerDialog.svelte
@@ -136,8 +136,6 @@
     return formatOrdinal(def?.startAt ?? 1, type.numFormat) + type.numSuffix;
   }
 
-  const PREVIEW_LEVELS = 3;
-
   const BORDER_WIDTHS = ['none', '0.5', '0.75', '1', '1.5', '2.25'];
   // The three border controls; the inner ones fall back to the shared innerBorder.
   type BorderKey = 'border' | 'innerBorderH' | 'innerBorderV';
@@ -527,9 +525,9 @@
 
       <div class="fields">
         {#if isList}
-          <!-- Three nested sample levels, markers and indents from the definition. -->
+          <!-- One sample line per defined level; the box scrolls past six of them. -->
           <div class="preview list-preview">
-            {#each Array(PREVIEW_LEVELS) as _, d}
+            {#each lStyle.levels as _, d}
               <div class="lp-line" style="margin-left: {Math.max(0, listStyleMarginCm(lStyle, d + 1)) * 0.28}rem">
                 <span class="lp-marker" class:right={lStyle.levels[d]?.markerAlign === 'right'}>{levelMarker(lStyle, d + 1)}</span>
                 <i class="lp-text"></i>
@@ -855,7 +853,11 @@
 </dialog>
 
 <style>
-  .list-preview { display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; }
+  /* .preview.list-preview outranks .preview's overflow: hidden below. */
+  .preview.list-preview {
+    display: flex; flex-direction: column; gap: 0.45rem;
+    max-height: 8.75rem; overflow-y: auto; flex-shrink: 0;
+  }
   .lp-line { display: flex; align-items: center; gap: 0.5rem; }
   .lp-marker { min-width: 1.6rem; font-size: 0.85rem; }
   .lp-marker.right { text-align: right; }
diff --git a/src/lib/i18n/locales/de.ts b/src/lib/i18n/locales/de.ts
index 2938b7a..90e0e07 100644
--- a/src/lib/i18n/locales/de.ts
+++ b/src/lib/i18n/locales/de.ts
@@ -189,7 +189,7 @@ const de: Messages = {
     indentStep: 'Einzugsschritt (cm)',
     markerRight: 'Nummer rechtsbündig',
     startAt: 'Beginnen mit',
-    multilevelAll: 'Alle Ebenen anzeigen (1.2.3)',
+    multilevelAll: 'Mehrstufige Nummerierung (1, 1.1, 1.2.1)',
     addLevel: 'Ebene hinzufügen',
     removeLevel: 'Letzte Ebene entfernen',
     region: 'Bereich',
diff --git a/src/lib/i18n/locales/en.ts b/src/lib/i18n/locales/en.ts
index 66608c9..875a72f 100644
--- a/src/lib/i18n/locales/en.ts
+++ b/src/lib/i18n/locales/en.ts
@@ -195,7 +195,7 @@ const en = {
     indentStep: 'Indent step (cm)',
     markerRight: 'Right-align label',
     startAt: 'Start at',
-    multilevelAll: 'Show all levels (1.2.3)',
+    multilevelAll: 'Multilevel numbering (1, 1.1, 1.2.1)',
     addLevel: 'Add level',
     removeLevel: 'Remove last level',
     region: 'Area',