From 24fffe1e8f73b262b11aa36519ca944e7763e0d2 Mon Sep 17 00:00:00 2001 From: FuelBoard Contributor Date: Tue, 11 Aug 2026 22:21:09 +0100 Subject: [PATCH] Pin large title above list so it fades+collapses in place on scroll (Mail-style cross-fade) --- FuelBoard/StationsView.swift | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/FuelBoard/StationsView.swift b/FuelBoard/StationsView.swift index 336cef6..1872853 100644 --- a/FuelBoard/StationsView.swift +++ b/FuelBoard/StationsView.swift @@ -28,12 +28,12 @@ struct StationsView: View { var body: some View { NavigationStack { - List { - // Large title header (icon + title). Native navigation titles - // can't carry an icon, so this is a real row at the top of the - // list. It cross-fades with the compact bar: once the list - // scrolls, this large title fades out in place while the - // smaller icon+title bar fades in below the nav bar (Mail-style). + VStack(spacing: 0) { + // Large pinned title — Mail-style. It stays in place above the + // list (content scrolls beneath it) and fades out in place + // once scrolling starts, while the compact icon+title bar fades + // in below the nav bar. Keeping it OUT of the List means the + // fade isn't masked by the row scrolling away. HStack(spacing: 10) { Image(systemName: "fuelpump.fill") .font(.system(size: 34)) @@ -42,13 +42,15 @@ struct StationsView: View { .font(.largeTitle.bold()) } .frame(maxWidth: .infinity, alignment: .leading) + .padding(.horizontal, 16) .padding(.vertical, 6) - .listRowSeparator(.hidden) - .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)) - .listRowBackground(Color.clear) + .frame(height: isScrolled ? 0 : 54, alignment: .top) + .clipped() + .background(Color(.systemGroupedBackground)) .opacity(isScrolled ? 0 : 1) .animation(.easeInOut(duration: 0.2), value: isScrolled) + List { Section { if let location { if sortMode == .closest { @@ -218,6 +220,7 @@ struct StationsView: View { } } .navigationBarTitleDisplayMode(.inline) + } } } }