From 472e2b7230cb9305058ea1a62e74dbc93895f4e5 Mon Sep 17 00:00:00 2001 From: Mollusk Date: Sun, 14 Jun 2026 03:32:53 -0400 Subject: [PATCH] fix(ui): robustly center the Settings header title MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sticky Settings header centered its title with two horizontal_space() flanks plus a hardcoded 90px right spacer guessing the Back button's width — off-center if the button's rendered width drifted (documented follow-up). Replace with equal-width Fill flanks: the Back button sits in a left Fill segment (left-aligned), an empty Fill segment balances the right, so the center title is geometrically centered regardless of button width. No magic constant. Pure layout change. Co-Authored-By: Claude Opus 4.8 --- src/app/mod.rs | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) 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),