fix(ui) : constrain condition selectors on mobile

components/public/team-search.tsx

@@ -6,6 +6,7 @@ import { ArrowUpRightIcon, SearchIcon, XIcon } from "lucide-react";
 import { useMemo, useState, type ReactNode } from "react";
 
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -389,13 +390,15 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
   );
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex min-w-0 flex-col gap-4">
       {groups.length > 1 ? (
-        <ToggleGroup aria-label="เลือกเงื่อนไขทีม" variant="outline" value={[activeCondition]} onValueChange={(values) => {
-          if (values[0]) setActiveCondition(values[0]);
-        }}>
-          {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{group.name || `Condition ${index + 1}`}</ToggleGroupItem>)}
-        </ToggleGroup>
+        <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
+          <ToggleGroup aria-label="เลือกเงื่อนไขทีม" variant="outline" value={[activeCondition]} onValueChange={(values) => {
+            if (values[0]) setActiveCondition(values[0]);
+          }}>
+            {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{group.name || `Condition ${index + 1}`}</ToggleGroupItem>)}
+          </ToggleGroup>
+        </ScrollableNav>
       ) : null}
       {activeGroup?.note ? <p className="whitespace-pre-wrap text-muted-foreground">{activeGroup.note}</p> : null}
       <div className="relative">