fix(desktop): lock profile-rail drag to the x-axis

overflow-x-auto makes overflow-y compute to auto, so a vertical drag
translate faulted in a cross-axis scrollbar. Pin the drag transform to
y:0 with a modifier — squares only slide horizontally now.
This commit is contained in:
Brooklyn Nicholson 2026-06-04 17:07:48 -05:00
parent cfbc47d893
commit 3e4fa8ca9c

View file

@ -3,6 +3,7 @@ import {
DndContext,
type DragEndEvent,
KeyboardSensor,
type Modifier,
PointerSensor,
useSensor,
useSensors
@ -41,6 +42,10 @@ import {
import { CreateProfileDialog } from '../../profiles/create-profile-dialog'
import { PROFILES_ROUTE } from '../../routes'
// The rail is a single horizontal strip; pin drags to the x-axis so a vertical
// nudge can't translate a square down and fault in a cross-axis scrollbar.
const lockToXAxis: Modifier = ({ transform }) => ({ ...transform, y: 0 })
// Arc-Spaces-style profile rail at the sidebar foot: a default↔all toggle pinned
// left, the colored named profiles scrolling between, and Manage pinned right.
// The active profile pops in its own color — the "where am I" cue. Only mounted
@ -105,7 +110,12 @@ export function ProfileRail() {
)}
<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} sensors={sensors}>
<DndContext
collisionDetection={closestCenter}
modifiers={[lockToXAxis]}
onDragEnd={handleDragEnd}
sensors={sensors}
>
<SortableContext items={named.map(profile => profile.name)} strategy={horizontalListSortingStrategy}>
{named.map(profile => (
<ProfileSquare