From 80d19c8ebbbf17ea3a406e99ce0727a63696ab74 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Tue, 8 Sep 2026 00:21:08 +0700
Subject: [PATCH] fix(ui) : constrain condition selectors on mobile

---
 components/admin/guide-section-editor.tsx | 141 ++++++++++++----------
 components/public/condition-switcher.tsx  |  31 ++---
 components/public/team-search.tsx         |  15 ++-
 3 files changed, 101 insertions(+), 86 deletions(-)

diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 6c56314..867e663 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -49,6 +49,7 @@ import {
 import { AutosaveStatus } from "@/components/admin/autosave-status";
 import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
 import { MediaUploader } from "@/components/admin/media-uploader";
+import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamArtifactIcon } from "@/components/public/team-search";
 import { SimpleTooltip } from "@/components/tooltip";
 import {
@@ -1240,25 +1241,27 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
           />
         </Field>
         <div className="flex flex-wrap gap-2">
-          <ToggleGroup
-            aria-label="เลือกเงื่อนไขอาวุธ"
-            variant="outline"
-            value={[String(activeGroupIndex)]}
-            onValueChange={(values) => {
-              if (values[0]) setActiveGroupIndex(Number(values[0]));
-            }}
-          >
-            {groups.map((group, index) => (
-              <ToggleGroupItem
-                key={group.clientId}
-                value={String(index)}
-                className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
-                onDoubleClick={() => setRenamingWeaponGroupIndex(index)}
-              >
-                {group.name.trim() || `Condition ${index + 1}`}
-              </ToggleGroupItem>
-            ))}
-          </ToggleGroup>
+          <ScrollableNav ariaLabel="เลือกเงื่อนไขอาวุธ" className="min-w-0 flex-1">
+            <ToggleGroup
+              aria-label="เลือกเงื่อนไขอาวุธ"
+              variant="outline"
+              value={[String(activeGroupIndex)]}
+              onValueChange={(values) => {
+                if (values[0]) setActiveGroupIndex(Number(values[0]));
+              }}
+            >
+              {groups.map((group, index) => (
+                <ToggleGroupItem
+                  key={group.clientId}
+                  value={String(index)}
+                  className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+                  onDoubleClick={() => setRenamingWeaponGroupIndex(index)}
+                >
+                  {group.name.trim() || `Condition ${index + 1}`}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+          </ScrollableNav>
           <Button type="button" variant="outline" disabled={groups.length >= 20} onClick={() => {
             setGroups([...groups, { clientId: createClientId("weapon-condition"), name: "", note: "", rows: [] }]);
             setActiveGroupIndex(groups.length);
@@ -2097,15 +2100,17 @@ function ArtifactEditor({
             <FieldSet>
               <FieldLegend>Target Stats</FieldLegend>
               <div className="flex flex-wrap gap-2">
-                <ToggleGroup variant="outline" value={[String(activeTargetGroupIndex)]} onValueChange={(values) => {
-                  if (values[0]) setActiveTargetGroupIndex(Number(values[0]));
-                }}>
-                  {targetGroups.map((group, index) => (
-                    <ToggleGroupItem key={group.clientId} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground" onDoubleClick={() => setRenamingTargetGroupIndex(index)}>
-                      {group.name.trim() || `Condition ${index + 1}`}
-                    </ToggleGroupItem>
-                  ))}
-                </ToggleGroup>
+                <ScrollableNav ariaLabel="เลือกเงื่อนไขค่าสถานะเป้าหมาย" className="min-w-0 flex-1">
+                  <ToggleGroup aria-label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" variant="outline" value={[String(activeTargetGroupIndex)]} onValueChange={(values) => {
+                    if (values[0]) setActiveTargetGroupIndex(Number(values[0]));
+                  }}>
+                    {targetGroups.map((group, index) => (
+                      <ToggleGroupItem key={group.clientId} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground" onDoubleClick={() => setRenamingTargetGroupIndex(index)}>
+                        {group.name.trim() || `Condition ${index + 1}`}
+                      </ToggleGroupItem>
+                    ))}
+                  </ToggleGroup>
+                </ScrollableNav>
                 <ConditionRenameDialog
                   open={renamingTargetGroupIndex !== null}
                   fallback={`Condition ${(renamingTargetGroupIndex ?? 0) + 1}`}
@@ -2399,25 +2404,27 @@ function ConstellationEditor({
             onChange={(event) => setNote(event.target.value)}
           />
         </Field>
-        <ToggleGroup
-          aria-label="เลือกเงื่อนไขกลุ่มดาว"
-          variant="outline"
-          value={[String(activeConstellationGroupIndex)]}
-          onValueChange={(values) => {
-            if (values[0]) setActiveConstellationGroupIndex(Number(values[0]));
-          }}
-        >
-          {groups.map((group, index) => (
-            <ToggleGroupItem
-              key={group.clientId}
-              value={String(index)}
-              className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
-              onDoubleClick={() => setRenamingConstellationGroupIndex(index)}
-            >
-              {group.name.trim() || `Condition ${index + 1}`}
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
+        <ScrollableNav ariaLabel="เลือกเงื่อนไขกลุ่มดาว" className="w-full min-w-0">
+          <ToggleGroup
+            aria-label="เลือกเงื่อนไขกลุ่มดาว"
+            variant="outline"
+            value={[String(activeConstellationGroupIndex)]}
+            onValueChange={(values) => {
+              if (values[0]) setActiveConstellationGroupIndex(Number(values[0]));
+            }}
+          >
+            {groups.map((group, index) => (
+              <ToggleGroupItem
+                key={group.clientId}
+                value={String(index)}
+                className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+                onDoubleClick={() => setRenamingConstellationGroupIndex(index)}
+              >
+                {group.name.trim() || `Condition ${index + 1}`}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </ScrollableNav>
         <ConditionRenameDialog
           open={renamingConstellationGroupIndex !== null}
           fallback={`Condition ${(renamingConstellationGroupIndex ?? 0) + 1}`}
@@ -3015,25 +3022,27 @@ function TeamEditor({
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <div className="flex flex-wrap gap-2">
-          <ToggleGroup
-            aria-label="เลือกเงื่อนไข Team"
-            variant="outline"
-            value={[String(activeTeamGroupIndex)]}
-            onValueChange={(values) => {
-              const nextIndex = Number(values[0]);
-              const group = teamGroups[nextIndex];
-              if (!group) return;
-              setActiveTeamGroupIndex(nextIndex);
-              setSelectedTeamIds(new Set());
-              setSourceTeamId(group.teams[0]?.clientId ?? "");
-            }}
-          >
-            {teamGroups.map((group, index) => (
-              <ToggleGroupItem key={group.clientId} value={String(index)} onDoubleClick={() => setRenamingTeamGroupIndex(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">
-                {group.name.trim() || `Condition ${index + 1}`}
-              </ToggleGroupItem>
-            ))}
-          </ToggleGroup>
+          <ScrollableNav ariaLabel="เลือกเงื่อนไข Team" className="min-w-0 flex-1">
+            <ToggleGroup
+              aria-label="เลือกเงื่อนไข Team"
+              variant="outline"
+              value={[String(activeTeamGroupIndex)]}
+              onValueChange={(values) => {
+                const nextIndex = Number(values[0]);
+                const group = teamGroups[nextIndex];
+                if (!group) return;
+                setActiveTeamGroupIndex(nextIndex);
+                setSelectedTeamIds(new Set());
+                setSourceTeamId(group.teams[0]?.clientId ?? "");
+              }}
+            >
+              {teamGroups.map((group, index) => (
+                <ToggleGroupItem key={group.clientId} value={String(index)} onDoubleClick={() => setRenamingTeamGroupIndex(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">
+                  {group.name.trim() || `Condition ${index + 1}`}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+          </ScrollableNav>
           <ConditionRenameDialog
             open={renamingTeamGroupIndex !== null}
             fallback={`Condition ${(renamingTeamGroupIndex ?? 0) + 1}`}
diff --git a/components/public/condition-switcher.tsx b/components/public/condition-switcher.tsx
index 46d230b..96a4537 100644
--- a/components/public/condition-switcher.tsx
+++ b/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>
   );
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 8e51505..c3d9d09 100644
--- a/components/public/team-search.tsx
+++ b/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">