fix(ui): robustly center the Settings header title
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 <noreply@anthropic.com>
This commit is contained in:
+19
-17
@@ -1325,27 +1325,29 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
|
|||||||
.height(iced::Length::Fill);
|
.height(iced::Length::Fill);
|
||||||
|
|
||||||
// Sticky header bar: stays fixed above the scrollable content so the Back
|
// Sticky header bar: stays fixed above the scrollable content so the Back
|
||||||
// button is always reachable. The "Settings" title is centered, with a
|
// button is always reachable. The "Settings" title is centered by flanking
|
||||||
// right-side spacer matching the Back button's width to keep it visually
|
// it with two equal-width Fill segments — the Back button lives in the left
|
||||||
// centered.
|
// 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(
|
let settings_header = container(
|
||||||
row![
|
row![
|
||||||
button(
|
container(
|
||||||
row![
|
button(
|
||||||
text("←").size(16),
|
row![
|
||||||
text("Back").size(14),
|
text("←").size(16),
|
||||||
]
|
text("Back").size(14),
|
||||||
.spacing(6)
|
]
|
||||||
.align_y(iced::alignment::Vertical::Center)
|
.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)
|
.width(iced::Length::Fill),
|
||||||
.style(b_style(color_surface, color_blue, color_text, 8.0))
|
|
||||||
.padding([8, 14]),
|
|
||||||
horizontal_space(),
|
|
||||||
text("Settings").size(20).color(color_blue),
|
text("Settings").size(20).color(color_blue),
|
||||||
horizontal_space(),
|
// Equal-width balance spacer keeps the title centered.
|
||||||
// Balance spacer so the title stays centered against the Back button.
|
container(text("")).width(iced::Length::Fill),
|
||||||
container(text("")).width(iced::Length::Fixed(90.0)),
|
|
||||||
]
|
]
|
||||||
.align_y(iced::alignment::Vertical::Center)
|
.align_y(iced::alignment::Vertical::Center)
|
||||||
.width(iced::Length::Fill),
|
.width(iced::Length::Fill),
|
||||||
|
|||||||
Reference in New Issue
Block a user