From 05ee8e0a7902ec2fba9f97e18641b7e82901b373 Mon Sep 17 00:00:00 2001
From: Trey T <trey@treymail.com>
Date: Mon, 30 Mar 2026 11:32:08 -0500
Subject: [PATCH] Fix picker capsule clipping and replace custom tab bar with
 native segmented control

Picker: moved .fixedSize(), .padding, .background, .clipShape outside the Menu
label so the capsule sizing is stable and never clips rounded corners during
menu open/close animation.

Tab bar: replaced custom HStack+underline tab bar with native SwiftUI
Picker(.segmented) for "For You" / "Browse All" tabs.
---
 .../Onboarding/OnboardingFirstTaskView.swift  | 39 ++-----------------
 .../OnboardingHomeProfileView.swift           | 30 +++++++-------
 2 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/iosApp/iosApp/Onboarding/OnboardingFirstTaskView.swift b/iosApp/iosApp/Onboarding/OnboardingFirstTaskView.swift
index a89dd18..c335042 100644
--- a/iosApp/iosApp/Onboarding/OnboardingFirstTaskView.swift
+++ b/iosApp/iosApp/Onboarding/OnboardingFirstTaskView.swift
@@ -944,45 +944,12 @@ private struct OnboardingTaskTabBar: View {
     @Binding var selectedTab: OnboardingTaskTab
 
     var body: some View {
-        HStack(spacing: 0) {
+        Picker("", selection: $selectedTab) {
             ForEach(OnboardingTaskTab.allCases, id: \.self) { tab in
-                Button {
-                    withAnimation(.spring(response: 0.3)) {
-                        selectedTab = tab
-                    }
-                } label: {
-                    VStack(spacing: 6) {
-                        HStack(spacing: 6) {
-                            if tab == .forYou {
-                                Image(systemName: "sparkles")
-                                    .font(.system(size: 12, weight: .semibold))
-                            } else {
-                                Image(systemName: "square.grid.2x2.fill")
-                                    .font(.system(size: 12, weight: .semibold))
-                            }
-                            Text(tab.rawValue)
-                                .font(.system(size: 14, weight: .semibold))
-                        }
-                        .foregroundColor(selectedTab == tab ? Color.appPrimary : Color.appTextSecondary)
-                        .frame(maxWidth: .infinity)
-
-                        // Indicator
-                        RoundedRectangle(cornerRadius: 1.5)
-                            .fill(selectedTab == tab ? Color.appPrimary : Color.clear)
-                            .frame(height: 3)
-                    }
-                }
-                .buttonStyle(.plain)
+                Text(tab.rawValue).tag(tab)
             }
         }
-        .padding(.vertical, 4)
-        .background(
-            ZStack {
-                Color.appBackgroundSecondary
-                GrainTexture(opacity: 0.01)
-            }
-        )
-        .clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
+        .pickerStyle(.segmented)
     }
 }
 
diff --git a/iosApp/iosApp/Onboarding/OnboardingHomeProfileView.swift b/iosApp/iosApp/Onboarding/OnboardingHomeProfileView.swift
index fbb8a07..9f29abf 100644
--- a/iosApp/iosApp/Onboarding/OnboardingHomeProfileView.swift
+++ b/iosApp/iosApp/Onboarding/OnboardingHomeProfileView.swift
@@ -332,23 +332,21 @@ private struct ProfilePicker: View {
                     }
                 }
             } label: {
-                HStack(spacing: 6) {
-                    Text(displayValue)
-                        .font(.system(size: 14, weight: .semibold))
-                        .foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
-
-                    Image(systemName: "chevron.up.chevron.down")
-                        .font(.system(size: 10, weight: .semibold))
-                        .foregroundColor(Color.appTextSecondary)
-                }
-                .fixedSize()
-                .padding(.horizontal, 14)
-                .padding(.vertical, 8)
-                .background(
-                    (selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
-                )
-                .clipShape(Capsule())
+                Text(displayValue)
+                    .font(.system(size: 14, weight: .semibold))
+                    .foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
+                +
+                Text("  \(Image(systemName: "chevron.up.chevron.down"))")
+                    .font(.system(size: 10, weight: .semibold))
+                    .foregroundColor(Color.appTextSecondary)
             }
+            .padding(.horizontal, 14)
+            .padding(.vertical, 8)
+            .background(
+                (selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
+            )
+            .clipShape(Capsule())
+            .fixedSize()
         }
     }