From 1ec22472951ca65fe55cca260caef188bf6c3b21 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 17 Feb 2026 22:34:51 +0100
Subject: [PATCH] Make selected expertise tags compact in onboarding

Reduced badge size (text-[11px], h-5, tighter padding/gaps) and capped
the selected tags container to max-h-20 with overflow scroll so they
no longer push the rest of the form off-screen on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/shared/expertise-select.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/expertise-select.tsx b/src/components/shared/expertise-select.tsx
index 8354100..0d8d69e 100644
--- a/src/components/shared/expertise-select.tsx
+++ b/src/components/shared/expertise-select.tsx
@@ -137,7 +137,7 @@ export function ExpertiseSelect({
 
       {/* Selected tags at the top */}
       {value.length > 0 && (
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-1 max-h-20 overflow-y-auto">
           {value.map((name) => {
             const tag = getTag(name)
             const isLocked = isTagLocked(name)
@@ -146,7 +146,7 @@ export function ExpertiseSelect({
                 key={name}
                 variant="secondary"
                 className={cn(
-                  'gap-1.5 py-1 px-2 text-sm',
+                  'gap-1 py-0 px-1.5 text-[11px] h-5 leading-tight',
                   isLocked && 'opacity-75'
                 )}
                 style={{
@@ -155,7 +155,7 @@ export function ExpertiseSelect({
                   color: tag?.color || undefined,
                 }}
               >
-                {isLocked && <Lock className="h-3 w-3 mr-0.5" />}
+                {isLocked && <Lock className="h-2.5 w-2.5 mr-0.5" />}
                 {name}
                 {!disabled && !isLocked && (
                   <button
@@ -164,7 +164,7 @@ export function ExpertiseSelect({
                     className="ml-0.5 rounded-full p-0.5 hover:bg-black/10 transition-colors"
                     aria-label={`Remove ${name}`}
                   >
-                    <X className="h-3 w-3" />
+                    <X className="h-2.5 w-2.5" />
                   </button>
                 )}
               </Badge>