fix: resolve settings tab layout and hit-testing issues

CHANGELOG.md

@@ -5,6 +5,17 @@ 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/),
 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
+
+### Changes
+- Added sleek SF Symbol icons to the Settings capsule tabs to improve visual scannability and modernize the interface.
+
 ## [0.5.0] - 2026-06-04
 
 ### New features

Sources/Firelink/SettingsView.swift

@@ -6,25 +6,31 @@ struct SettingsPaneContainer: View {
 
     var body: some View {
         VStack(spacing: 0) {
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 8) {
-                    ForEach(SettingsSidebarFilter.allCases, id: \.self) { filter in
-                        Button {
-                            activeTab = filter
-                        } label: {
+            HStack(spacing: 4) {
+                ForEach(SettingsSidebarFilter.allCases, id: \.self) { filter in
+                    Button {
+                        activeTab = filter
+                    } label: {
+                        VStack(spacing: 4) {
+                            Image(systemName: filter.symbolName)
+                                .font(.system(size: 16))
                             Text(filter.rawValue)
-                                .padding(.horizontal, 12)
-                                .padding(.vertical, 6)
+                                .font(.system(size: 11, weight: .medium))
+                                .lineLimit(1)
+                                .minimumScaleFactor(0.8)
                         }
-                        .buttonStyle(.plain)
-                        .background(activeTab == filter ? Color.accentColor : Color.clear)
-                        .foregroundStyle(activeTab == filter ? Color.white : Color.primary)
-                        .clipShape(Capsule())
+                        .frame(maxWidth: .infinity)
+                        .padding(.vertical, 8)
+                        .contentShape(Rectangle())
                     }
+                    .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()