refactor: move index range fields next to eval split in 3-col grid

Place Slice Start and Slice End inputs alongside the Eval Split
selector in a single row (grid-cols-3) so the dataset card stays
compact. Remove the duplicate controls from the Advanced section.

studio/frontend/src/features/studio/sections/dataset-section.tsx

@@ -13,7 +13,6 @@ import {
   ComboboxItem,
   ComboboxList,
 } from "@/components/ui/combobox";
-import { Input } from "@/components/ui/input";
 import { InputGroupAddon } from "@/components/ui/input-group";
 import {
   Select,
@@ -291,6 +290,10 @@ export function DatasetSection() {
           setDatasetSplit={setDatasetSplit}
           datasetEvalSplit={datasetEvalSplit}
           setDatasetEvalSplit={setDatasetEvalSplit}
+          datasetSliceStart={datasetSliceStart}
+          setDatasetSliceStart={setDatasetSliceStart}
+          datasetSliceEnd={datasetSliceEnd}
+          setDatasetSliceEnd={setDatasetSliceEnd}
         />
 
         <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
@@ -302,93 +305,51 @@ export function DatasetSection() {
             Advanced
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-3">
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-2">
-                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                  Target Format
-                  <Tooltip>
-                    <TooltipTrigger asChild={true}>
-                      <button
-                        type="button"
-                        className="text-foreground/70 hover:text-foreground"
-                      >
-                        <HugeiconsIcon
-                          icon={InformationCircleIcon}
-                          className="size-3"
-                        />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      Format of your training data. Auto-detect works for most
-                      datasets.{" "}
-                      <a
-                        href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary underline"
-                      >
-                        Read more
-                      </a>
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <Select
-                  value={datasetFormat}
-                  onValueChange={(v) =>
-                    setDatasetFormat(v as typeof datasetFormat)
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="auto">Auto</SelectItem>
-                    <SelectItem value="alpaca">Alpaca</SelectItem>
-                    <SelectItem value="chatml">ChatML</SelectItem>
-                    <SelectItem value="sharegpt">ShareGPT</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-2">
-                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                  Index Range
-                  <Tooltip>
-                    <TooltipTrigger asChild={true}>
-                      <button
-                        type="button"
-                        className="text-foreground/70 hover:text-foreground"
-                      >
-                        <HugeiconsIcon
-                          icon={InformationCircleIcon}
-                          className="size-3"
-                        />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      Slice the dataset by row index. Both start and end are
-                      inclusive. Leave empty to use all rows.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <div className="grid grid-cols-2 gap-2">
-                  <Input
-                    inputMode="numeric"
-                    placeholder="Start"
-                    value={datasetSliceStart ?? ""}
-                    onChange={(e) =>
-                      setDatasetSliceStart(e.target.value || null)
-                    }
-                  />
-                  <Input
-                    inputMode="numeric"
-                    placeholder="End"
-                    value={datasetSliceEnd ?? ""}
-                    onChange={(e) =>
-                      setDatasetSliceEnd(e.target.value || null)
-                    }
-                  />
-                </div>
-              </div>
+            <div className="flex flex-col gap-2">
+              <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                Target Format
+                <Tooltip>
+                  <TooltipTrigger asChild={true}>
+                    <button
+                      type="button"
+                      className="text-foreground/70 hover:text-foreground"
+                    >
+                      <HugeiconsIcon
+                        icon={InformationCircleIcon}
+                        className="size-3"
+                      />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Format of your training data. Auto-detect works for most
+                    datasets.{" "}
+                    <a
+                      href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary underline"
+                    >
+                      Read more
+                    </a>
+                  </TooltipContent>
+                </Tooltip>
+              </span>
+              <Select
+                value={datasetFormat}
+                onValueChange={(v) =>
+                  setDatasetFormat(v as typeof datasetFormat)
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">Auto</SelectItem>
+                  <SelectItem value="alpaca">Alpaca</SelectItem>
+                  <SelectItem value="chatml">ChatML</SelectItem>
+                  <SelectItem value="sharegpt">ShareGPT</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
           </CollapsibleContent>
         </Collapsible>

studio/frontend/src/features/training/components/hf-dataset-subset-split-selectors.tsx

@@ -5,6 +5,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import {
   Tooltip,
@@ -31,6 +32,10 @@ type Props = {
   setDatasetSplit: (v: string | null) => void;
   datasetEvalSplit: string | null;
   setDatasetEvalSplit: (v: string | null) => void;
+  datasetSliceStart?: string | null;
+  setDatasetSliceStart?: (v: string | null) => void;
+  datasetSliceEnd?: string | null;
+  setDatasetSliceEnd?: (v: string | null) => void;
 };
 
 export function HfDatasetSubsetSplitSelectors({
@@ -44,6 +49,10 @@ export function HfDatasetSubsetSplitSelectors({
   setDatasetSplit,
   datasetEvalSplit,
   setDatasetEvalSplit,
+  datasetSliceStart,
+  setDatasetSliceStart,
+  datasetSliceEnd,
+  setDatasetSliceEnd,
 }: Props) {
   const {
     subsets: hfSubsets,
@@ -155,16 +164,89 @@ export function HfDatasetSubsetSplitSelectors({
               />
             </>
           )}
-          <SelectorDropdown
-            variant={variant}
-            label="Eval Split"
-            tooltip="Select which split to use for evaluation. None means no evaluation during training."
-            value={datasetEvalSplit}
-            onChange={setDatasetEvalSplit}
-            options={hfSplits}
-            placeholder="None"
-            allowNone
-          />
+          {variant === "studio" && setDatasetSliceStart && setDatasetSliceEnd ? (
+            <div className="grid grid-cols-3 gap-3">
+              <SelectorDropdown
+                variant={variant}
+                label="Eval Split"
+                tooltip="Select which split to use for evaluation. None means no evaluation during training."
+                value={datasetEvalSplit}
+                onChange={setDatasetEvalSplit}
+                options={hfSplits}
+                placeholder="None"
+                allowNone
+              />
+              <div className="flex flex-col gap-1.5">
+                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                  Slice Start
+                  <Tooltip>
+                    <TooltipTrigger asChild={true}>
+                      <button
+                        type="button"
+                        className="text-foreground/70 hover:text-foreground"
+                      >
+                        <HugeiconsIcon
+                          icon={InformationCircleIcon}
+                          className="size-3"
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      Inclusive start row index. Leave empty to start from the beginning.
+                    </TooltipContent>
+                  </Tooltip>
+                </span>
+                <Input
+                  inputMode="numeric"
+                  placeholder="0"
+                  value={datasetSliceStart ?? ""}
+                  onChange={(e) =>
+                    setDatasetSliceStart(e.target.value || null)
+                  }
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                  Slice End
+                  <Tooltip>
+                    <TooltipTrigger asChild={true}>
+                      <button
+                        type="button"
+                        className="text-foreground/70 hover:text-foreground"
+                      >
+                        <HugeiconsIcon
+                          icon={InformationCircleIcon}
+                          className="size-3"
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      Inclusive end row index. Leave empty to use all remaining rows.
+                    </TooltipContent>
+                  </Tooltip>
+                </span>
+                <Input
+                  inputMode="numeric"
+                  placeholder="End"
+                  value={datasetSliceEnd ?? ""}
+                  onChange={(e) =>
+                    setDatasetSliceEnd(e.target.value || null)
+                  }
+                />
+              </div>
+            </div>
+          ) : (
+            <SelectorDropdown
+              variant={variant}
+              label="Eval Split"
+              tooltip="Select which split to use for evaluation. None means no evaluation during training."
+              value={datasetEvalSplit}
+              onChange={setDatasetEvalSplit}
+              options={hfSplits}
+              placeholder="None"
+              allowNone
+            />
+          )}
         </>
       )}
     </>