From 731adda8974a9d518b86b8f5ac3e69e52a9b33ed Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 26 Dec 2025 17:43:31 +0100
Subject: [PATCH] improve toggle button alignment and prayer verse spacing

- Wrap rosary page toggles in centered container with left-aligned items
- Reduce spacing between toggles from 2rem to 0.5rem
- Simplify Toggle component styling (remove centering/margins)
- Add centered wrapper for gebete page toggle
- Add spacing between German verses in monolingual mode for readability
---
 src/lib/components/Toggle.svelte          |  5 ----
 src/lib/components/prayers/Prayer.svelte  |  1 +
 src/routes/glaube/gebete/+page.svelte     |  9 ++++++-
 src/routes/glaube/rosenkranz/+page.svelte | 29 ++++++++++++++++-------
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index c8e1400..c8175d1 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -7,11 +7,6 @@
 <style>
 .toggle-wrapper {
 	display: flex;
-	justify-content: center;
-	margin-bottom: 2rem;
-	max-width: 1200px;
-	margin-left: auto;
-	margin-right: auto;
 }
 
 .toggle-wrapper label {
diff --git a/src/lib/components/prayers/Prayer.svelte b/src/lib/components/prayers/Prayer.svelte
index d75f064..3726323 100644
--- a/src/lib/components/prayers/Prayer.svelte
+++ b/src/lib/components/prayers/Prayer.svelte
@@ -100,6 +100,7 @@
 /* German gets primary styling in monolingual mode */
 .prayer-wrapper.monolingual :global(v:lang(de)) {
 	color: var(--nord6);
+	margin-bottom: 0.5em;
 }
 
 @media(prefers-color-scheme: light) {
diff --git a/src/routes/glaube/gebete/+page.svelte b/src/routes/glaube/gebete/+page.svelte
index ebe212c..4512c6a 100644
--- a/src/routes/glaube/gebete/+page.svelte
+++ b/src/routes/glaube/gebete/+page.svelte
@@ -43,10 +43,17 @@ h1{
 	text-align: center;
 	font-size: 3rem;
 }
+.toggle-controls {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 2rem;
+}
 </style>
 <h1>Gebete</h1>
 
-<LanguageToggle />
+<div class="toggle-controls">
+	<LanguageToggle />
+</div>
 
 <div class="ccontainer">
 <div class=container>
diff --git a/src/routes/glaube/rosenkranz/+page.svelte b/src/routes/glaube/rosenkranz/+page.svelte
index 31e7dfb..6cde724 100644
--- a/src/routes/glaube/rosenkranz/+page.svelte
+++ b/src/routes/glaube/rosenkranz/+page.svelte
@@ -901,6 +901,16 @@ h1 {
 	margin-bottom: 2rem;
 }
 
+/* Toggle controls container */
+.toggle-controls {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.5rem;
+	max-width: fit-content;
+	margin: 0 auto 2rem auto;
+}
+
 /* Mystery selector grid */
 .mystery-selector {
 	display: grid;
@@ -1226,15 +1236,18 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 		{/if}
 	</div>
 
-	<!-- Luminous Mysteries Toggle -->
-	<Toggle
-		bind:checked={includeLuminous}
-		label="Lichtreiche Geheimnisse einbeziehen"
-		on:change={handleToggleChange}
-	/>
+	<!-- Toggle Controls -->
+	<div class="toggle-controls">
+		<!-- Luminous Mysteries Toggle -->
+		<Toggle
+			bind:checked={includeLuminous}
+			label="Lichtreiche Geheimnisse einbeziehen"
+			on:change={handleToggleChange}
+		/>
 
-	<!-- Language Toggle -->
-	<LanguageToggle />
+		<!-- Language Toggle -->
+		<LanguageToggle />
+	</div>
 
 	<div class="rosary-layout">
 		<!-- Sidebar: Rosary Visualization -->