Fix search bar width

app/src/main/kotlin/androidx/compose/material3/SearchBar2.kt

@@ -207,6 +207,7 @@ fun SearchBar(
         tonalElevation = tonalElevation,
         shadowElevation = shadowElevation,
         modifier = modifier
+            .padding(horizontal = lerp(SearchBarHorizontalPadding, 0.dp, animationProgress.value))
             .zIndex(1f)
             .onConsumedWindowInsetsChanged { consumedInsets ->
                 unconsumedInsets.insets = windowInsets.exclude(consumedInsets)
@@ -463,6 +464,7 @@ private val SearchBarCornerRadius: Dp = InputFieldHeight / 2
 internal val SearchBarMinWidth: Dp = 360.dp
 private val SearchBarMaxWidth: Dp = 720.dp
 internal val SearchBarVerticalPadding: Dp = 8.dp
+internal val SearchBarHorizontalPadding: Dp = 16.dp
 
 // Search bar has 16dp padding between icons and start/end, while by default text field has 12dp.
 private val SearchBarIconOffsetX: Dp = 4.dp

app/src/main/kotlin/com/hippo/ehviewer/ui/scene/SearchBarScene.kt

@@ -11,12 +11,12 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.union
@@ -50,7 +50,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCompositionContext
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.layout
@@ -226,103 +225,98 @@ fun SearchBarScreen(
     }
 
     var searchbarOfs by searchBarOffsetY
-    Box(modifier = Modifier.fillMaxSize()) {
-        SearchBar(
-            modifier = Modifier.layout { measurable, constraints ->
-                val placeable = measurable.measure(constraints)
-                layout(placeable.width, placeable.height) {
-                    placeable.placeRelative(0, searchbarOfs)
-                }
-            }.align(Alignment.TopCenter),
-            state = searchFieldState,
-            onSearch = {
-                hideSearchView()
-                onApplySearch()
-            },
-            active = active,
-            onActiveChange = {
-                if (it) {
-                    searchbarOfs = 0
-                    onSearchViewExpanded()
-                } else {
-                    onSearchViewHidden()
-                }
-                active = it
-            },
-            placeholder = { Text(searchFieldHint) },
-            leadingIcon = {
-                if (active) {
-                    IconButton(onClick = { hideSearchView() }) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = null)
+    Scaffold(
+        topBar = {
+            SearchBar(
+                modifier = Modifier.fillMaxWidth().layout { measurable, constraints ->
+                    val placeable = measurable.measure(constraints)
+                    layout(placeable.width, placeable.height) {
+                        placeable.placeRelative(0, searchbarOfs)
                     }
-                } else {
-                    IconButton(onClick = { activity.openDrawer() }) {
-                        Icon(Icons.Default.Menu, contentDescription = null)
+                },
+                state = searchFieldState,
+                onSearch = {
+                    hideSearchView()
+                    onApplySearch()
+                },
+                active = active,
+                onActiveChange = {
+                    if (it) {
+                        searchbarOfs = 0
+                        onSearchViewExpanded()
+                    } else {
+                        onSearchViewHidden()
                     }
-                }
-            },
-            trailingIcon = {
-                if (active) {
-                    if (searchFieldState.text.isNotEmpty()) {
-                        IconButton(onClick = { searchFieldState.clearText() }) {
-                            Icon(Icons.Default.Close, contentDescription = null)
+                    active = it
+                },
+                placeholder = { Text(searchFieldHint) },
+                leadingIcon = {
+                    if (active) {
+                        IconButton(onClick = { hideSearchView() }) {
+                            Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = null)
+                        }
+                    } else {
+                        IconButton(onClick = { activity.openDrawer() }) {
+                            Icon(Icons.Default.Menu, contentDescription = null)
                         }
                     }
-                } else {
-                    Row {
-                        trailingIcon()
+                },
+                trailingIcon = {
+                    if (active) {
+                        if (searchFieldState.text.isNotEmpty()) {
+                            IconButton(onClick = { searchFieldState.clearText() }) {
+                                Icon(Icons.Default.Close, contentDescription = null)
+                            }
+                        }
+                    } else {
+                        Row {
+                            trailingIcon()
+                        }
                     }
-                }
-            },
-        ) {
-            LazyColumn(
-                contentPadding = WindowInsets.navigationBars.union(WindowInsets.ime).asPaddingValues(),
+                },
             ) {
-                items(mSuggestionList) {
-                    ListItem(
-                        headlineContent = { Text(text = it.keyword) },
-                        supportingContent = it.hint.ifNotNullThen { Text(text = it.hint!!) },
-                        leadingContent = it.canOpenDirectly.ifTrueThen {
-                            Icon(
-                                imageVector = Icons.AutoMirrored.Default.MenuBook,
-                                contentDescription = null,
-                            )
-                        },
-                        trailingContent = it.canDelete.ifTrueThen {
-                            IconButton(onClick = { deleteKeyword(it.keyword) }) {
+                LazyColumn(
+                    contentPadding = WindowInsets.navigationBars.union(WindowInsets.ime)
+                        .asPaddingValues(),
+                ) {
+                    items(mSuggestionList) {
+                        ListItem(
+                            headlineContent = { Text(text = it.keyword) },
+                            supportingContent = it.hint.ifNotNullThen { Text(text = it.hint!!) },
+                            leadingContent = it.canOpenDirectly.ifTrueThen {
                                 Icon(
-                                    imageVector = Icons.Default.Close,
+                                    imageVector = Icons.AutoMirrored.Default.MenuBook,
                                     contentDescription = null,
                                 )
-                            }
-                        },
-                        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
-                        modifier = Modifier.clickable { it.onClick() },
-                    )
-                }
-            }
-        }
-        Scaffold(
-            floatingActionButton = {
-                AnimatedVisibility(
-                    visible = showSearchFab,
-                    enter = scaleIn(),
-                    exit = scaleOut(),
-                ) {
-                    FloatingActionButton(onClick = ::onApplySearch) {
-                        Icon(imageVector = Icons.Default.Search, contentDescription = null)
+                            },
+                            trailingContent = it.canDelete.ifTrueThen {
+                                IconButton(onClick = { deleteKeyword(it.keyword) }) {
+                                    Icon(
+                                        imageVector = Icons.Default.Close,
+                                        contentDescription = null,
+                                    )
+                                }
+                            },
+                            colors = ListItemDefaults.colors(containerColor = Color.Transparent),
+                            modifier = Modifier.clickable { it.onClick() },
+                        )
                     }
                 }
-            },
-        ) {
-            content(
-                PaddingValues(
-                    top = it.calculateTopPadding() + 64.dp,
-                    bottom = it.calculateBottomPadding(),
-                ),
-            )
-        }
-    }
+            }
+        },
+        floatingActionButton = {
+            AnimatedVisibility(
+                visible = showSearchFab,
+                enter = scaleIn(),
+                exit = scaleOut(),
+            ) {
+                FloatingActionButton(onClick = ::onApplySearch) {
+                    Icon(imageVector = Icons.Default.Search, contentDescription = null)
+                }
+            }
+        },
+        content = content,
+    )
 }
 
 abstract class SearchBarScene : BaseScene() {