diff --git a/src/app/mod.rs b/src/app/mod.rs index 0b2b51d..e94a4b4 100644 --- a/src/app/mod.rs +++ b/src/app/mod.rs @@ -1325,27 +1325,29 @@ fn view(state: &AppState) -> Element<'_, AppMessage> { .height(iced::Length::Fill); // Sticky header bar: stays fixed above the scrollable content so the Back - // button is always reachable. The "Settings" title is centered, with a - // right-side spacer matching the Back button's width to keep it visually - // centered. + // button is always reachable. The "Settings" title is centered by flanking + // it with two equal-width Fill segments — the Back button lives in the left + // one (left-aligned) and the right one is an empty balance, so the title is + // mathematically centered regardless of the Back button's rendered width. let settings_header = container( row![ - button( - row![ - text("←").size(16), - text("Back").size(14), - ] - .spacing(6) - .align_y(iced::alignment::Vertical::Center) + container( + button( + row![ + text("←").size(16), + text("Back").size(14), + ] + .spacing(6) + .align_y(iced::alignment::Vertical::Center) + ) + .on_press(AppMessage::NavigateBack) + .style(b_style(color_surface, color_blue, color_text, 8.0)) + .padding([8, 14]) ) - .on_press(AppMessage::NavigateBack) - .style(b_style(color_surface, color_blue, color_text, 8.0)) - .padding([8, 14]), - horizontal_space(), + .width(iced::Length::Fill), text("Settings").size(20).color(color_blue), - horizontal_space(), - // Balance spacer so the title stays centered against the Back button. - container(text("")).width(iced::Length::Fixed(90.0)), + // Equal-width balance spacer keeps the title centered. + container(text("")).width(iced::Length::Fill), ] .align_y(iced::alignment::Vertical::Center) .width(iced::Length::Fill),