Skip to content

Conversation

@fhasse95
Copy link
Contributor

Currently, when you add a horizontal padding to a LazyVGrid, the container applies it to all child components, including the search bar on Android. This behavior differs from iOS, where the search bar remains anchored to the system's layout margins, regardless of the horizontal padding applied to the content area.

iOS:
image

Before (Android):
image

After (Android):
image

Example Code:

struct FruitItem: Equatable, Hashable {
    let emoji: String
    let name: String
}

struct FavoritesFormView: View {
    @State private var selectedFruit: FruitItem?
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    NavigationLink {
                        FruitPickerView(selectedFruit: self.$selectedFruit)
                    } label: {
                        HStack {
                            Text("Fruit")
                            Spacer()
                            if let selectedFruit = self.selectedFruit {
                                Text(selectedFruit.emoji).font(.system(size: 28))
                            } else {
                                Text("Required").foregroundStyle(.red)
                            }
                        }
                    }
                } header: {
                    Text("Food")
                }
            }.navigationTitle("Favorites")
        }
    }
}

struct FruitPickerView: View {
    @Environment(\.dismiss) private var dismiss
    @Binding var selectedFruit: FruitItem?
    @State private var searchText = ""
    
    let items: [FruitItem] = [
        FruitItem(emoji: "🍎", name: "Apple"),
        FruitItem(emoji: "🍊", name: "Orange"),
        FruitItem(emoji: "🍌", name: "Banana"),
        FruitItem(emoji: "🍒", name: "Cherry"),
        FruitItem(emoji: "🫐", name: "Elderberry"),
        FruitItem(emoji: "🍇", name: "Grape"),
        FruitItem(emoji: "🍈", name: "Honeydew")
    ]
    
    var filteredItems: [FruitItem] {
        self.searchText.isEmpty
            ? self.items
            : self.items.filter {
                 $0.name.lowercased().contains(self.searchText.lowercased())
              }
    }
    
    let columns = Array(repeating: GridItem(.flexible()), count: 4)
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: self.columns, spacing: 20) {
                ForEach(self.filteredItems, id: \.self) { item in
                    Button {
                        if self.selectedFruit == item {
                            self.selectedFruit = nil
                        } else {
                            self.selectedFruit = item
                        }
                        self.dismiss()
                    } label: {
                        Text(item.emoji)
                            .font(.system(size: 40))
                            .frame(maxWidth: .infinity, minHeight: 60)
                            .background(
                                self.selectedFruit == item
                                    ? Color.blue.opacity(0.3)
                                    : Color.gray.opacity(0.3),
                                in: RoundedRectangle(cornerRadius: 10)
                            )
                    }
                    .buttonStyle(.plain)
                }
            }
            .padding(.horizontal) // <-- Default Content Padding
        }
        .navigationTitle("Select Fruit")
        .searchable(text: self.$searchText)
    }
}


Thank you for contributing to the Skip project! Please use this space to describe your change and add any labels (bug, enhancement, documentation, etc.) to help categorize your contribution.

Skip Pull Request Checklist:

  • REQUIRED: I have signed the Contributor Agreement
  • REQUIRED: I have tested my change locally with swift test
  • OPTIONAL: I have tested my change on an iOS simulator or device
  • OPTIONAL: I have tested my change on an Android emulator or device
  • REQUIRED: I have checked whether this change requires a corresponding update in the Skip Fuse UI repository (link related PR if applicable)
  • OPTIONAL: I have added an example of any UI changes in the Showcase sample app

@cla-bot cla-bot bot added the cla-signed label Jan 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant