fix(ui) : constrain condition selectors on mobile

2026-09-08 00:21:08 +07:00
parent 255a408e97
commit 80d19c8ebb
3 changed files with 101 additions and 86 deletions
@@ -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}`}