Implement two lists side by side with SwiftUI on iPad

I'm currently building an App using a TabView as the main navigation method. In my app I would like to build a page similar to the Top Charts in the native App Store App with two lists side by side:

So far I came up with this code (simplified demo):

import SwiftUI

struct Demo: View {
    var body: some View {
        TabView {
            Tab("Main Tab", systemImage: "tray.and.arrow.down.fill") {
                NavigationStack {
                    HStack {
                        List {
                            Text("Left List")
                        }
                        List {
                            Text("Right List")
                        }
                    }
                    .navigationTitle("Demo")
                    .navigationBarTitleDisplayMode(.inline)
                }
            }
        }
    }
}

#Preview {
    Demo()
}

However, I’m encountering a couple of issues:

• Scrolling to the top of the left list doesn’t trigger the toolbar background effect, and the content overlaps with the tabs in a strange way. Scrolling to the top of the right list works as expected.

• The navigation title is always hidden.

I haven’t been able to find a solution to these problems. What would be the correct approach? Thank you!