fix: resolve settings tab layout and hit-testing issues

This commit is contained in:
nimbold
2026-06-04 06:03:30 +03:30
parent 2f5e593d0b
commit d9c7da23e9
2 changed files with 27 additions and 19 deletions
+6
View File
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [0.5.2] - 2026-06-04
### Fixes
- Fixed the hit-testing area on Settings tabs so the entire tab frame is clickable, not just the text/icon.
- Re-architected the Settings tab bar layout to perfectly distribute available horizontal space, ensuring symmetric right/left padding.
## [0.5.1] - 2026-06-04 ## [0.5.1] - 2026-06-04
### Changes ### Changes
+21 -19
View File
@@ -6,29 +6,31 @@ struct SettingsPaneContainer: View {
var body: some View { var body: some View {
VStack(spacing: 0) { VStack(spacing: 0) {
ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 4) {
HStack(spacing: 8) { ForEach(SettingsSidebarFilter.allCases, id: \.self) { filter in
ForEach(SettingsSidebarFilter.allCases, id: \.self) { filter in Button {
Button { activeTab = filter
activeTab = filter } label: {
} label: { VStack(spacing: 4) {
HStack(spacing: 6) { Image(systemName: filter.symbolName)
Image(systemName: filter.symbolName) .font(.system(size: 16))
Text(filter.rawValue) Text(filter.rawValue)
} .font(.system(size: 11, weight: .medium))
.padding(.horizontal, 14) .lineLimit(1)
.padding(.vertical, 8) .minimumScaleFactor(0.8)
.font(.system(size: 13, weight: .medium))
} }
.buttonStyle(.plain) .frame(maxWidth: .infinity)
.background(activeTab == filter ? Color.accentColor : Color.clear) .padding(.vertical, 8)
.foregroundStyle(activeTab == filter ? Color.white : Color.primary) .contentShape(Rectangle())
.clipShape(Capsule())
} }
.buttonStyle(.plain)
.background(activeTab == filter ? Color.accentColor : Color.clear)
.foregroundStyle(activeTab == filter ? Color.white : Color.primary)
.clipShape(RoundedRectangle(cornerRadius: 8))
} }
.padding(.horizontal, 32)
.padding(.vertical, 16)
} }
.padding(.horizontal, 32)
.padding(.vertical, 16)
Divider() Divider()