Study card: scrollable content + slide-up rating buttons

app/src/androidTest/java/nart/simpleanki/feature/study/StudyContentTest.kt

@@ -23,7 +23,7 @@ class StudyContentTest {
     )
 
     @Test
-    fun front_showsQuestion_andRevealButton() {
+    fun front_showsQuestion_andFlipsOnTap() {
         var revealed = false
         composeRule.setContent {
             StudyContent(
@@ -33,8 +33,8 @@ class StudyContentTest {
                 onDone = {},
             )
         }
-        composeRule.onNodeWithText("hola").assertIsDisplayed()
-        composeRule.onNodeWithText("Show answer").assertIsDisplayed().performClick()
+        // The card flips on tap (no "Show answer" button) — tapping the question reveals the answer.
+        composeRule.onNodeWithText("hola").assertIsDisplayed().performClick()
         assertTrue(revealed)
     }
 

app/src/main/java/nart/simpleanki/feature/study/StudyScreen.kt

@@ -1,5 +1,9 @@
 package nart.simpleanki.feature.study
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -106,36 +110,51 @@ private fun StudyCard(state: StudyUiState, onReveal: () -> Unit, onRate: (Rating
             )
         }
         Spacer(Modifier.height(16.dp))
-        if (!state.isRevealed) {
-            if (state.showFlipHint) {
-                Row(
-                    Modifier.fillMaxWidth().height(60.dp),
-                    horizontalArrangement = Arrangement.Center,
-                    verticalAlignment = Alignment.CenterVertically,
+        // Fixed-height slot so the FlipCard above never shifts. Two full-size Column layers inside
+        // a Box overlap (z-stack) so the rating row slides up OVER the cross-fading hint. (Each
+        // AnimatedVisibility needs a ColumnScope; this Compose version has no top-level overload.)
+        Box(Modifier.fillMaxWidth().height(60.dp)) {
+            Column(Modifier.fillMaxSize()) {
+                AnimatedVisibility(
+                    visible = !state.isRevealed,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
                 ) {
-                    Icon(
-                        Icons.Outlined.TouchApp,
-                        contentDescription = null,
-                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
-                    Spacer(Modifier.width(8.dp))
-                    Text(
-                        "Tap to flip",
-                        style = MaterialTheme.typography.labelLarge,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
+                    if (state.showFlipHint) {
+                        Row(
+                            Modifier.fillMaxWidth().height(60.dp),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically,
+                        ) {
+                            Icon(
+                                Icons.Outlined.TouchApp,
+                                contentDescription = null,
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                            Spacer(Modifier.width(8.dp))
+                            Text(
+                                "Tap to flip",
+                                style = MaterialTheme.typography.labelLarge,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
                 }
-            } else {
-                // Keep the layout stable once the hint is gone.
-                Spacer(Modifier.height(60.dp))
             }
-        } else {
-            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                // iOS rating colors (SwiftUI system): again=pink, hard=orange, good=indigo, easy=mint.
-                RatingButton("Again", state.ratingIntervals[Rating.Again], Color(0xFFFF2D55), Modifier.weight(1f)) { onRate(Rating.Again) }
-                RatingButton("Hard", state.ratingIntervals[Rating.Hard], Color(0xFFFF9500), Modifier.weight(1f)) { onRate(Rating.Hard) }
-                RatingButton("Good", state.ratingIntervals[Rating.Good], Color(0xFF5856D6), Modifier.weight(1f)) { onRate(Rating.Good) }
-                RatingButton("Easy", state.ratingIntervals[Rating.Easy], Color(0xFF00C7BE), Modifier.weight(1f)) { onRate(Rating.Easy) }
+            Column(Modifier.fillMaxSize()) {
+                AnimatedVisibility(
+                    visible = state.isRevealed,
+                    enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
+                    exit = fadeOut(),
+                ) {
+                    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                        // iOS rating colors (SwiftUI system): again=pink, hard=orange, good=indigo, easy=mint.
+                        RatingButton("Again", state.ratingIntervals[Rating.Again], Color(0xFFFF2D55), Modifier.weight(1f)) { onRate(Rating.Again) }
+                        RatingButton("Hard", state.ratingIntervals[Rating.Hard], Color(0xFFFF9500), Modifier.weight(1f)) { onRate(Rating.Hard) }
+                        RatingButton("Good", state.ratingIntervals[Rating.Good], Color(0xFF5856D6), Modifier.weight(1f)) { onRate(Rating.Good) }
+                        RatingButton("Easy", state.ratingIntervals[Rating.Easy], Color(0xFF00C7BE), Modifier.weight(1f)) { onRate(Rating.Easy) }
+                    }
+                }
             }
         }
     }

app/src/main/java/nart/simpleanki/ui/components/FlipCard.kt

@@ -4,12 +4,16 @@ import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -99,26 +103,36 @@ private fun CardFace(
     audioName: String? = null,
     audioPath: String? = null,
 ) {
-    Column(
-        modifier.fillMaxSize().padding(24.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
-    ) {
-        Text(
-            label,
-            style = MaterialTheme.typography.labelSmall,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
-            letterSpacing = 1.sp,
-        )
-        Spacer(Modifier.height(12.dp))
-        imageName?.let { name ->
-            MediaImage(name, imagePath, Modifier.fillMaxWidth().height(160.dp))
-            Spacer(Modifier.height(16.dp))
-        }
-        Text(text, style = textStyle, color = textColor, textAlign = TextAlign.Center)
-        audioName?.let { name ->
+    // Center the content when it fits the card; when it overflows, the column grows past the
+    // viewport and verticalScroll lets the user scroll (centering then naturally yields no extra
+    // space). heightIn(min = maxHeight) is what makes the "center when short" case work. Mirrors
+    // iOS's ScrollView { ... }.frame(minHeight: proxy.size.height).
+    BoxWithConstraints(modifier.fillMaxSize().padding(horizontal = 24.dp)) {
+        Column(
+            Modifier
+                .verticalScroll(rememberScrollState())
+                .heightIn(min = maxHeight)
+                .fillMaxWidth()
+                .padding(vertical = 24.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Text(
+                label,
+                style = MaterialTheme.typography.labelSmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                letterSpacing = 1.sp,
+            )
             Spacer(Modifier.height(12.dp))
-            AudioPlayButton(name, audioPath)
+            imageName?.let { name ->
+                MediaImage(name, imagePath, Modifier.fillMaxWidth().height(160.dp))
+                Spacer(Modifier.height(16.dp))
+            }
+            Text(text, style = textStyle, color = textColor, textAlign = TextAlign.Center)
+            audioName?.let { name ->
+                Spacer(Modifier.height(12.dp))
+                AudioPlayButton(name, audioPath)
+            }
         }
     }
 }
@@ -149,3 +163,25 @@ private fun FlipCardBackPreview() {
         )
     }
 }
+
+private val previewLongCard = Card(
+    id = "c2",
+    front = "Explain the difference between the present perfect and the simple past tense, " +
+        "with at least three examples of each, and describe when a learner should prefer one " +
+        "over the other in everyday conversation. Then summarize the key rule in one sentence.",
+    back = "The present perfect links a past action to the present; the simple past describes a " +
+        "finished action at a definite time.",
+    deckId = "d1",
+    dateCreated = 0, lastModified = 0, fsrsDue = 0, fsrsState = CardState.New.value,
+)
+
+@Preview(name = "FlipCard · long text", showBackground = true)
+@Composable
+private fun FlipCardLongTextPreview() {
+    AzriTheme {
+        FlipCard(
+            previewLongCard, revealed = false, onFlip = {},
+            modifier = Modifier.fillMaxWidth().height(300.dp).padding(20.dp),
+        )
+    }
+}