From dcd0a98c0c73c2d23a0be25ec5763d5f84b73893 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Thu, 23 Apr 2026 17:49:31 +0200
Subject: [PATCH] Declare Top bar first and use zIndex.

---
 .../impl/viewer/MediaViewerView.kt            | 88 ++++++++++---------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt
index 7149592a26..f22f326986 100644
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt
@@ -59,6 +59,7 @@ import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import coil3.compose.AsyncImage
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
@@ -130,6 +131,52 @@ fun MediaViewerView(
                 state.eventSink(MediaViewerEvent.OnNavigateTo(page))
             }
         }
+        // Top bar
+        AnimatedVisibility(
+            modifier = Modifier.zIndex(1f),
+            visible = showOverlay,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            when (currentData) {
+                is MediaViewerPageData.MediaViewerData -> {
+                    MediaViewerTopBar(
+                        data = currentData,
+                        canShowInfo = state.canShowInfo,
+                        onBackClick = onBackClick,
+                        onShareClick = {
+                            state.eventSink(MediaViewerEvent.Share(currentData))
+                        },
+                        onSaveClick = {
+                            state.eventSink(MediaViewerEvent.SaveOnDisk(currentData))
+                        },
+                        onInfoClick = {
+                            state.eventSink(MediaViewerEvent.OpenInfo(currentData))
+                        },
+                    )
+                }
+                else -> {
+                    TopAppBar(
+                        title = {
+                            if (currentData is MediaViewerPageData.Loading) {
+                                Text(
+                                    modifier = Modifier.semantics {
+                                        heading()
+                                    },
+                                    text = stringResource(id = CommonStrings.common_loading_more),
+                                    style = ElementTheme.typography.fontBodyMdMedium,
+                                    color = ElementTheme.colors.textPrimary,
+                                )
+                            }
+                        },
+                        colors = TopAppBarDefaults.topAppBarColors(
+                            containerColor = bgCanvasWithTransparency,
+                        ),
+                        navigationIcon = { BackButton(onClick = onBackClick) },
+                    )
+                }
+            }
+        }
         HorizontalPager(
             state = pagerState,
             modifier = Modifier,
@@ -202,47 +249,6 @@ fun MediaViewerView(
                 }
             }
         }
-        // Top bar
-        AnimatedVisibility(visible = showOverlay, enter = fadeIn(), exit = fadeOut()) {
-            when (currentData) {
-                is MediaViewerPageData.MediaViewerData -> {
-                    MediaViewerTopBar(
-                        data = currentData,
-                        canShowInfo = state.canShowInfo,
-                        onBackClick = onBackClick,
-                        onShareClick = {
-                            state.eventSink(MediaViewerEvent.Share(currentData))
-                        },
-                        onSaveClick = {
-                            state.eventSink(MediaViewerEvent.SaveOnDisk(currentData))
-                        },
-                        onInfoClick = {
-                            state.eventSink(MediaViewerEvent.OpenInfo(currentData))
-                        },
-                    )
-                }
-                else -> {
-                    TopAppBar(
-                        title = {
-                            if (currentData is MediaViewerPageData.Loading) {
-                                Text(
-                                    modifier = Modifier.semantics {
-                                        heading()
-                                    },
-                                    text = stringResource(id = CommonStrings.common_loading_more),
-                                    style = ElementTheme.typography.fontBodyMdMedium,
-                                    color = ElementTheme.colors.textPrimary,
-                                )
-                            }
-                        },
-                        colors = TopAppBarDefaults.topAppBarColors(
-                            containerColor = bgCanvasWithTransparency,
-                        ),
-                        navigationIcon = { BackButton(onClick = onBackClick) },
-                    )
-                }
-            }
-        }
     }
 
     when (val bottomSheetState = state.mediaBottomSheetState) {