e01dc7d3d3
Desktop board scrollers no longer snap: the browser's proximity-snap settle animation was capturing wheel/trackpad pans and reading as a slow, sticky drag toward a column center. Base `.board`, `.board-workflow-columns`, and `.lane-columns` declare `scroll-snap-type: none`; proximity snap is re-declared in phone-tier media blocks only, where the JS column pager owns paging. On phones, the hook now owns post-lift motion instead of waiting it out. A directional lift kills native inertia and animates to its target column via rAF ease-out (~190-300ms), so the page starts moving on lift rather than after a native fling that can coast for most of a second. Fling reach is preserved by deriving a page count (1-3) from release velocity sampled off the board's own scroll ticks, not from however far inertia happens to travel. Guards: re-touch cancels the animation and hands the axis back to the finger; reduced motion, missing rAF, and sub-2px distances fall back to the instant hard jump; unmount mid-animation restores the frozen inline styles; a fast drag that rests before lifting is not treated as a flick. Tap-to-stop-during-momentum is gone as an interaction (no long coast remains to interrupt). Its regression test is reframed around the equivalent seam: a drag that interrupts the page animation wins over the pending page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
209 lines
4.7 KiB
CSS
209 lines
4.7 KiB
CSS
/* Multi-lane board lane (U9). Each lane is a full-width vertical row whose
|
|
* columns scroll horizontally inside the lane. Tokens mirror .board/.column in
|
|
* app/styles.css; no monolith CSS is touched. */
|
|
|
|
.board-lanes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--column-gap, 12px);
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: var(--board-padding, 12px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.board-workflow-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.board-workflow-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md) var(--space-xl);
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.board-workflow-selector {
|
|
display: inline-flex;
|
|
margin-left: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
.board.board-workflow-columns {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overscroll-behavior-x: contain;
|
|
/*
|
|
FNXC:BoardNavigation 2026-07-24-10:05:
|
|
Desktop/tablet workflow-column scrolling is free-panning — snapping (and its slow browser
|
|
settle animation) is reserved for the phone tier, where the JS column pager owns paging.
|
|
*/
|
|
scroll-snap-type: none;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
.board.board-workflow-columns > .column {
|
|
flex: 1 0 300px;
|
|
min-width: 300px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
scroll-snap-align: center;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
.lane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg, 10px);
|
|
background: var(--surface-muted, var(--surface));
|
|
}
|
|
|
|
.lane-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.lane-header:hover {
|
|
background: var(--surface-hover, var(--surface));
|
|
}
|
|
|
|
.lane-header:focus-visible {
|
|
outline: 2px solid var(--todo);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.lane-name {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.lane-count {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted, var(--text));
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm, 6px);
|
|
padding: 0 6px;
|
|
min-width: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.lane-columns {
|
|
display: flex;
|
|
gap: var(--column-gap, 12px);
|
|
padding: 12px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overscroll-behavior-x: contain;
|
|
/* FNXC:BoardNavigation 2026-07-24-10:05: lane columns snap on phones only (see mobile block). */
|
|
scroll-snap-type: none;
|
|
scrollbar-color: var(--border) transparent;
|
|
scrollbar-width: thin;
|
|
min-height: 0;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
.lane-columns > .column {
|
|
flex: 0 0 clamp(280px, 28vw, 340px);
|
|
/* Repo convention (mobile-scroll-snap test): snap-align must be `center`. */
|
|
scroll-snap-align: center;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
.lane-columns::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
.lane-columns::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm, 6px);
|
|
}
|
|
|
|
/* Inline column feedback (capacity-exhausted promote, deterministic drag
|
|
* rejection) — rendered in-column, not a toast (R17 / promote spec). */
|
|
.column-inline-feedback {
|
|
margin: 4px 12px 0;
|
|
padding: 6px 8px;
|
|
font-size: 0.8rem;
|
|
color: var(--color-error);
|
|
background: color-mix(in srgb, var(--color-error) 12%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
|
|
border-radius: var(--radius-sm, 6px);
|
|
}
|
|
|
|
|
|
@media (max-width: 1024px) {
|
|
.board.board-lanes {
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scroll-snap-type: none;
|
|
}
|
|
|
|
.board.board-lanes > .lane {
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.board.board-workflow-columns {
|
|
flex: 1 1 auto;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scroll-snap-type: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
FNXC:BoardNavigation 2026-07-24-10:05:
|
|
Phone tier keeps proximity snapping (paired with the JS column pager in useColumnScrollSnap) so a
|
|
swipe still rests on exactly one column center. Mirrors the mobile `.board` block in styles.css and
|
|
matches the mobile viewport query (max-width: 768px, max-height: 480px).
|
|
*/
|
|
@media (max-width: 768px), (max-height: 480px) {
|
|
.board.board-workflow-columns,
|
|
.lane-columns {
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
}
|