fix: old styling with new shadcn components

app/(app)/pastel/batch/page.tsx

@@ -127,7 +127,7 @@ export default function BatchPage() {
                   value={operation}
                   onValueChange={(value) => setOperation(value as Operation)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select operation" />
                   </SelectTrigger>
                   <SelectContent>

app/(app)/pastel/colorblind/page.tsx

@@ -122,7 +122,7 @@ export default function ColorBlindPage() {
                   value={blindnessType}
                   onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select type" />
                   </SelectTrigger>
                   <SelectContent>

app/(app)/pastel/contrast/page.tsx

@@ -39,7 +39,7 @@ export default function ContrastPage() {
   }) => (
     <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
       <span className="text-sm">{label}</span>
-      <Badge variant={passed ? 'secondary' : 'destructive'}>
+      <Badge variant={passed ? 'default' : 'destructive'}>
         {passed ? (
           <>
             <Check className="h-3 w-3 mr-1" />

app/(app)/pastel/distinct/page.tsx

@@ -79,7 +79,7 @@ export default function DistinctPage() {
                   value={metric}
                   onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select metric" />
                   </SelectTrigger>
                   <SelectContent>

app/(app)/pastel/harmony/page.tsx

@@ -82,7 +82,7 @@ export default function HarmonyPage() {
                   value={harmonyType}
                   onValueChange={(value) => setHarmonyType(value as HarmonyType)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select harmony" />
                   </SelectTrigger>
                   <SelectContent>

app/(app)/pastel/names/page.tsx

@@ -64,7 +64,7 @@ export default function NamedColorsPage() {
           </div>
           <div className="w-full sm:w-48">
             <Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}>
-              <SelectTrigger>
+              <SelectTrigger className="w-full">
                 <SelectValue placeholder="Sort by..." />
               </SelectTrigger>
               <SelectContent>