I am implementing a view that includes nested scroll views: a vertical scroll view containing a horizontal scroll view. I am encountering two main issues:

Content Accessibility: After the horizontal scroll view, I have additional content (e.g., text) within the vertical scroll view. This content is not easily accessible on the screen. To view it, users have to keep scrolling and hold the scroll, which is not a user-friendly experience.

Background Issue: There is a greyish background at the bottom of the screen. This background intermittently disappears, and I would like to remove it entirely.

Image of View

import SwiftUI

struct Feed: View {
    @State var selected = ""
    var body: some View {
        NavigationStack {
            VStack {
                HStack {
                    Spacer()
                    
                }
                .padding(.horizontal)
                .padding(.top, 20) // Add padding to push down the button
                
                HStack {
                    Text("Project Title")
                        .fontWeight(.bold)
                        .font(.system(size: 27))
                    Spacer()
                }
                .padding()
                
                
                ScrollView(.horizontal, showsIndicators: false){
                    HStack(spacing: 25) {
                        ForEach(menu, id:.self){item in
                            Button {
                                selected = item
                            } label: {
                                Text(item)
                                    .fontWeight(.semibold)
                                    .font(.system(size: 15))
                                    .foregroundStyle(selected == item ? Color(.blue) : Color(.white))
                            }
                            
                            
                            
                        }
                    }
                    .padding(.horizontal)
                }
              **  ScrollView{**
                    FeedItem()
                    
                    // Horizontal feed of images
                    Text("Civic Engagement")
                        .fontWeight(.bold)
                        .font(.system(size: 20))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                   ** ScrollView**(.horizontal, showsIndicators: false) {
                        HStack(spacing: 10) {
                            ForEach(engagementItem) { Item in // Example: Displaying 10 images, replace with your data
                                
                                EngagementRow(item: Item).onTapGesture {
                                    UIApplication.shared.open(URL(string: Item.link)!)
                                }
                             
                            }
                        }
                        .padding()
                    }.scrollIndicators(.hidden)
                    
                    Spacer()
                    
                    Text("Voting")// Text is hard to see here!
                        .fontWeight(.bold)
                        .font(.system(size: 20))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                     
                    Text("People") // Text is hard to see here!
                        .fontWeight(.bold)
                        .font(.system(size: 20))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                }.scrollIndicators(.hidden)
                    .frame(maxHeight: .infinity)
                
          
                
                
            }
            .ignoresSafeArea()
        }.preferredColorScheme(.dark)
        
    }
}
let menu = ["Events", "Civic Engagement", "Voting", "People"]