Fix the split view layout on iOS 27. (#6180)

This commit is contained in:
Doug
2026-09-22 17:41:23 +01:00
committed by GitHub
parent 8ba47a333a
commit 223ddeae22
2 changed files with 22 additions and 0 deletions
@@ -397,6 +397,8 @@ private struct NavigationSplitCoordinatorView: View {
.environment(\.isInSidebar, true)
// The tab rail's background tracks the detail module, so exclude the sidebar's background value.
.transformPreference(CompoundBackgroundPreferenceKey.self) { $0 = nil }
.overlay(alignment: .leading) { sidebarDivider }
.overlay(alignment: .trailing) { sidebarDivider }
} detail: {
if let detailModule = navigationSplitCoordinator.detailModule {
detailModule.coordinator?.toPresentable()
@@ -414,6 +416,16 @@ private struct NavigationSplitCoordinatorView: View {
.animation(.elementDefault, value: navigationSplitCoordinator.sidebarModule)
.animation(.noAnimation, value: navigationSplitCoordinator.detailModule) // Don't crossfade the detail transition on iPad.
}
@ViewBuilder
var sidebarDivider: some View {
if #available(iOS 27, *) {
HStack(spacing: 0) { // The stack is necessary for the divider's orientation.
Divider()
}
.ignoresSafeArea()
}
}
}
// MARK: - NavigationStackCoordinator
@@ -416,6 +416,7 @@ private struct NavigationTabCoordinatorView<Tag: Hashable>: View {
}
// Match the rail's background to the colour of the split view's detail (or the root if there isn't a split).
.onPreferenceChange(CompoundBackgroundPreferenceKey.self) { background in
guard #unavailable(iOS 27) else { return } // The background is only necessary for iOS 26's inset sidebar.
railBackgroundColor = background?.colorValue ?? .compound.bgCanvasDefault
}
.introspect(.window, on: .supportedVersions) { window in
@@ -488,6 +489,14 @@ struct TabRailView<Tag: Hashable>: View {
isFullScreen || ProcessInfo.processInfo.isiOSAppOnMac ? 0 : 48
}
var trailingPadding: CGFloat {
if #available(iOS 27, *) {
8
} else {
0
}
}
var body: some View {
ScrollView {
VStack(spacing: 16) {
@@ -508,6 +517,7 @@ struct TabRailView<Tag: Hashable>: View {
}
}
.padding(.leading, 8)
.padding(.trailing, trailingPadding)
.padding(.top, topPadding)
.padding(.bottom)
}