mollusk/peerspeak
Public Access
1
0
Fork 0
Code Issues Pull Requests 3 Actions 1 Packages Projects Releases 10 Wiki Activity

fix(ui): robustly center the Settings header title

Browse Source 
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:
mollusk
2026-06-14 03:32:53 -04:00
co-authored by Claude Opus 4.8
parent 9e5fd63291
commit 472e2b7230
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/mod.rs
+19 -17
View File
@@ -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),