1936c78774
Prevent native text-selection autoscroll from competing with intentional Board panning while preserving editable controls. - Suppress selection across Board surfaces and restore it for editable descendants. - Document the scrolling behavior and add CSS and component coverage for responsive and grouped columns. - Add a patch changeset for the dashboard behavior fix. Files changed: .changeset/fn-194-board-text-selection.md | 7 + docs/dashboard-guide.md | 5 +- .../app/__tests__/board-text-selection.test.ts | 86 ++++++++++++ packages/dashboard/app/components/Board.css | 20 ++- packages/dashboard/app/components/Board.tsx | 5 + .../__tests__/Board.text-selection.test.tsx | 144 +++++++++++++++++++++ 6 files changed, 264 insertions(+), 3 deletions(-) Fusion-Task-Id: FN-194 Fusion-Task-Lineage: 65f46bed-76f1-4e5f-9dce-7e6ce26b5fa5 Co-authored-by: Fusion <noreply@runfusion.ai>
99 lines
3.0 KiB
CSS
99 lines
3.0 KiB
CSS
/*
|
|
FNXC:BoardWorkflows 2026-06-20-09:02:
|
|
The board needs a neutral first-paint shell whenever workflow lanes are enabled but metadata is not ready, so users never see the legacy single-lane board flash before workflow lanes load.
|
|
*/
|
|
.board.board-workflows-skeleton {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--column-gap, var(--space-md));
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: var(--board-padding, var(--space-md));
|
|
background: var(--bg);
|
|
}
|
|
|
|
.board-workflows-skeleton__column {
|
|
flex: 1 0 min(24rem, 85vw);
|
|
min-width: min(24rem, 85vw);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.board-workflows-skeleton__header,
|
|
.board-workflows-skeleton__card {
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--border) 70%, var(--surface));
|
|
animation: board-workflows-skeleton-pulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.board-workflows-skeleton__header {
|
|
block-size: var(--space-lg);
|
|
inline-size: 55%;
|
|
}
|
|
|
|
.board-workflows-skeleton__card {
|
|
block-size: calc(var(--space-2xl) * 2);
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.board-workflows-skeleton__card--short {
|
|
inline-size: 75%;
|
|
}
|
|
|
|
/*
|
|
FNXC:BoardTextSelection 2026-08-27-10:06:
|
|
FN-194 keeps the intentional `useBoardMousePan` drag while removing the browser's second horizontal-scroll system: selection-autoscroll begins before its 4px pan threshold when text is dragged. The operator explicitly chose non-selectable Board text to prevent that involuntary scroll.
|
|
Anchor this at `.board`, rather than a workflow variant, so both live roots, the skeleton, every breakpoint, and every data state share the rule. The editable carve-out must remain more specific than suppression so inputs and inline card editing keep native text selection independently of CSS import order.
|
|
*/
|
|
.board,
|
|
.board * {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.board :is(input, textarea, select, [contenteditable="true"], .card-editing, .card-editing *) {
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-webkit-touch-callout: default;
|
|
}
|
|
|
|
/*
|
|
FNXC:BoardNavigation 2026-08-21-16:03:
|
|
FN-109 shows grab feedback only after a desktop/tablet pan crosses horizontal intent from a safe
|
|
surface or noninteractive task-card body/text. Controls, editing cards, the unbound skeleton, and
|
|
the disabled mobile path never activate it; this gesture pans the viewport and never relocates a task. Selection suppression is unconditional and owned by the BoardTextSelection rule above.
|
|
*/
|
|
.board.board-workflow-columns.is-mouse-panning {
|
|
cursor: grabbing;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes board-workflows-skeleton-pulse {
|
|
0%, 100% {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.board.board-workflows-skeleton {
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.board-workflows-skeleton__column {
|
|
flex-basis: 86vw;
|
|
min-width: 86vw;
|
|
scroll-snap-align: center;
|
|
}
|
|
}
|