fix(ui) : constrain condition selectors on mobile

components/public/condition-switcher.tsx

@@ -2,6 +2,7 @@
 
 import { Children, type ReactNode, useState } from "react";
 
+import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export function ConditionSwitcher({
@@ -19,20 +20,22 @@ export function ConditionSwitcher({
   if (items.length <= 1) return items[0] ?? null;
 
   return (
-    <div className="flex flex-col gap-4">
-      <ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
-        if (values[0]) setActive(values[0]);
-      }}>
-        {items.map((_, index) => (
-          <ToggleGroupItem
-            key={index}
-            value={String(index)}
-            className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
-          >
-            {labels?.[index] || `Condition ${index + 1}`}
-          </ToggleGroupItem>
-        ))}
-      </ToggleGroup>
+    <div className="flex min-w-0 flex-col gap-4">
+      <ScrollableNav ariaLabel={label} className="w-full min-w-0">
+        <ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
+          if (values[0]) setActive(values[0]);
+        }}>
+          {items.map((_, index) => (
+            <ToggleGroupItem
+              key={index}
+              value={String(index)}
+              className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+            >
+              {labels?.[index] || `Condition ${index + 1}`}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </ScrollableNav>
       {items[Number(active)]}
     </div>
   );

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">