I made some tests. It seems that padding on ScrollView is creating the issue.
This code work. no ScrollView, padding applies to HStack
var body: some View {
ScrollView {
VStack {
// ScrollView(.horizontal) {
HStack {
LeagueSelectorButton(text: "Premier League", leagueID: 39, isSelected: $isSelected)
}
// }
// .scrollIndicators(.hidden)
.padding()
This one doesn't: padding applies to ScrollView
var body: some View {
ScrollView {
VStack {
ScrollView(.horizontal) {
HStack {
LeagueSelectorButton(text: "Premier League", leagueID: 39, isSelected: $isSelected)
}
}
// .scrollIndicators(.hidden)
.padding()
This works as well: ScrollView but padding moved as HStack modifier:
var body: some View {
ScrollView {
VStack {
ScrollView(.horizontal) {
HStack {
LeagueSelectorButton(text: "Premier League", leagueID: 39, isSelected: $isSelected)
}
.padding() // <<-- Works if padding here
}
.scrollIndicators(.hidden)
// .padding() // <<-- Does not work if padding here