From 598acb410d5ed2921c88eb897a9be82c14058303 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 10 May 2026 14:47:15 +0200
Subject: [PATCH] =?UTF-8?q?fix(study):=20kein=20Layout-Sprung=20beim=20Wec?=
 =?UTF-8?q?hsel=20Reveal=20=E2=86=94=20Grade-Buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

grade-row bleibt immer im Flow und setzt die Höhe der action-bar.
reveal-row liegt absolut darüber. Wechsel via visibility statt {#if},
sodass die Karte beim Aufdecken nicht springt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/study/[deckId]/+page.svelte    | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/routes/study/[deckId]/+page.svelte b/apps/web/src/routes/study/[deckId]/+page.svelte
index 410dde2..5b70855 100644
--- a/apps/web/src/routes/study/[deckId]/+page.svelte
+++ b/apps/web/src/routes/study/[deckId]/+page.svelte
@@ -227,32 +227,39 @@
 			</CardSurface>
 		</div>
 
-		{#if !revealed}
-			<div class="reveal-row">
-				<button class="btn-primary reveal" onclick={() => (revealed = true)}>
-					{t('study_session.reveal')} <kbd>Space</kbd>
-				</button>
-			</div>
-		{:else}
-			<div class="grade-row" role="group" aria-label={t('study_session.grade_hint')}>
-				<button class="grade grade-again" onclick={() => grade('again')} disabled={busy}>
+		<div class="action-bar">
+			<!-- grade-row immer im Flow → setzt die Höhe der action-bar -->
+			<div
+				class="grade-row"
+				class:invisible={!revealed}
+				role="group"
+				aria-label={t('study_session.grade_hint')}
+				aria-hidden={!revealed}
+			>
+				<button class="grade grade-again" onclick={() => grade('again')} disabled={busy} tabindex={revealed ? 0 : -1}>
 					<span>{t('study_session.grade_again')}</span>
 					<kbd>1</kbd>
 				</button>
-				<button class="grade grade-hard" onclick={() => grade('hard')} disabled={busy}>
+				<button class="grade grade-hard" onclick={() => grade('hard')} disabled={busy} tabindex={revealed ? 0 : -1}>
 					<span>{t('study_session.grade_hard')}</span>
 					<kbd>2</kbd>
 				</button>
-				<button class="grade grade-good" onclick={() => grade('good')} disabled={busy}>
+				<button class="grade grade-good" onclick={() => grade('good')} disabled={busy} tabindex={revealed ? 0 : -1}>
 					<span>{t('study_session.grade_good')}</span>
 					<kbd>3</kbd>
 				</button>
-				<button class="grade grade-easy" onclick={() => grade('easy')} disabled={busy}>
+				<button class="grade grade-easy" onclick={() => grade('easy')} disabled={busy} tabindex={revealed ? 0 : -1}>
 					<span>{t('study_session.grade_easy')}</span>
 					<kbd>4</kbd>
 				</button>
 			</div>
-		{/if}
+			<!-- reveal-row liegt absolut über der grade-row -->
+			<div class="reveal-row" class:invisible={revealed} aria-hidden={revealed}>
+				<button class="btn-primary reveal" onclick={() => (revealed = true)} tabindex={revealed ? -1 : 0}>
+					{t('study_session.reveal')} <kbd>Space</kbd>
+				</button>
+			</div>
+		</div>
 	{/if}
 	</div>
 </div>
@@ -503,10 +510,24 @@
 	/* Reveal-Button und Grade-Row sitzen UNTER der Karte — keine
 	   Sub-Karten, sondern Aktions-Leiste. Bewahrt das "eine Karte ist
 	   eine Karte"-Gefühl. */
-	.reveal-row {
-		display: flex;
-		justify-content: center;
+	.action-bar {
+		position: relative;
 		margin-top: 1.5rem;
+		width: 100%;
+		max-width: 24rem;
+	}
+
+	.invisible {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.reveal-row {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.btn-primary.reveal {
@@ -526,7 +547,6 @@
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 		gap: 0.5rem;
-		margin-top: 1.5rem;
 	}
 
 	.grade {