feat(ui): sticky Settings header with Back button

Move the Settings "Back" button out of the scrollable (where it sat as the
last child and scrolled off the bottom of a long page) into a fixed header
bar that stays pinned at the top while content scrolls. The header is a
styled bar with the Back button on the left and a centered "Settings" title;
the old top title and bottom Back button inside the scrollable are removed.

Pure layout change, still dispatches AppMessage::NavigateBack.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/mod.rs

@@ -1149,8 +1149,6 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
 
         let settings_content = scrollable(
             column![
-                text("Settings").size(24).color(color_blue),
-                vertical_space(10.0),
                 text("Device Settings").size(14).color(color_subtext),
                 vertical_space(6.0),
                 row![
@@ -1240,24 +1238,53 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
                     path_field("Mic Toggle", Sound::MicToggle),
                     path_field("Reconnect Failed", Sound::ReconnectFailed),
                 ].spacing(20).width(iced::Length::Fill),
-
-                vertical_space(14.0),
-                button(
-                    text("Back")
-                        .size(16)
-                        .align_x(iced::alignment::Horizontal::Center)
-                )
-                .on_press(AppMessage::NavigateBack)
-                .style(b_style(color_surface, color_blue, color_text, 8.0))
-                .padding(14)
-                .width(iced::Length::Fixed(150.0))
             ]
             .align_x(iced::alignment::Horizontal::Center)
             .spacing(10)
             .width(iced::Length::Fill)
-        );
+        )
+        .width(iced::Length::Fill)
+        .height(iced::Length::Fill);
 
-        let settings_box = container(settings_content)
+        // 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.
+        let settings_header = container(
+            row![
+                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]),
+                horizontal_space(),
+                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)),
+            ]
+            .align_y(iced::alignment::Vertical::Center)
+            .width(iced::Length::Fill),
+        )
+        .padding([12, 16])
+        .width(iced::Length::Fill)
+        .style(c_style(color_crust, color_surface, 8.0));
+
+        let settings_box = container(
+            column![
+                settings_header,
+                vertical_space(12.0),
+                settings_content,
+            ]
+            .width(iced::Length::Fill)
+            .height(iced::Length::Fill),
+        )
             .style(c_style(color_mantle, color_surface, 12.0))
             .padding(24)
             .width(iced::Length::Fill)