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>
   );