From a006c6505cc02afcccfb1960d620f6b957224aa0 Mon Sep 17 00:00:00 2001
From: Matt <matt@Matt-Surface.local>
Date: Tue, 17 Feb 2026 11:38:26 +0100
Subject: [PATCH] Onboarding: use ocean background image, show full expertise
 tag names

- Replace blue gradient with ocean.png background (matches email templates)
- Display expertise tags one per line with full names (no truncation)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/(auth)/onboarding/page.tsx         | 4 ++--
 src/components/shared/expertise-select.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(auth)/onboarding/page.tsx b/src/app/(auth)/onboarding/page.tsx
index 283d56a..c2dc95e 100644
--- a/src/app/(auth)/onboarding/page.tsx
+++ b/src/app/(auth)/onboarding/page.tsx
@@ -221,7 +221,7 @@ export default function OnboardingPage() {
   // Show loading while session hydrates or fetching user data
   if (sessionStatus === 'loading' || userLoading || !initialized) {
     return (
-      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
         <AnimatedCard>
         <Card className="w-full max-w-lg shadow-2xl overflow-hidden">
           <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
@@ -236,7 +236,7 @@ export default function OnboardingPage() {
   }
 
   return (
-    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
       <AnimatedCard>
       <Card className="w-full max-w-lg max-h-[85vh] overflow-y-auto overflow-hidden shadow-2xl">
         <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
diff --git a/src/components/shared/expertise-select.tsx b/src/components/shared/expertise-select.tsx
index cc5a4f9..6c9166b 100644
--- a/src/components/shared/expertise-select.tsx
+++ b/src/components/shared/expertise-select.tsx
@@ -212,7 +212,7 @@ export function ExpertiseSelect({
                 </button>
 
                 {isExpanded && (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-1 p-2">
+                  <div className="grid grid-cols-1 gap-1 p-2">
                     {categoryTags.map((tag) => {
                       const isSelected = value.includes(tag.name)
                       const isLocked = isTagLocked(tag.name)
@@ -261,7 +261,7 @@ export function ExpertiseSelect({
                                 <Check className="h-2 w-2 text-white" />
                               ))}
                           </div>
-                          <span className="text-xs truncate">{tag.name}</span>
+                          <span className="text-xs">{tag.name}</span>
                         </Button>
                       )
                     })}