fix(ui): timeline alignment

[johallar]

Description

Fixes vertical alignment between timeline controller, ruler, and resource timelines

I think this got misaligned when upgrading to echarts 6, and is fixed (mostly) by adding the outerBoundsMode: 'none' to TIMELINE_SPACING.

This also bumps the timeline ruler chips to the inside by 2px so they aren't clipped by the svg bounds.

Related Issues

Fixes #566

Testing

• Timeline ruler and controller function as before, but should be pixel perfect aligned with the resource timelines below
• TimelineRuler min/max chips should not be clipped

Screenshots

[coderabbitai]

📝 Walkthrough

Walkthrough

The timeline controller now accounts for ECharts handle insets. The ruler applies endpoint chip insets and removes its fixed left offset. Timeline spacing explicitly disables outer bounds.

Changes

Timeline alignment

Layer / File(s)	Summary
Timeline spacing and controller alignment ui/packages/@quent/components/src/timeline/types.ts, ui/packages/@quent/components/src/timeline/TimelineController.tsx	TIMELINE_SPACING sets outerBoundsMode to 'none'. The dataZoom slider left offset subtracts the ECharts handle inset.
Ruler endpoint label alignment ui/packages/@quent/components/src/timeline/TimelineRuler.tsx	Endpoint labels add leading or trailing inset spacing through the chipInset rich-text style. The fixed grid.left offset is removed.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• rapidsai/quent#384: Uses TIMELINE_SPACING for timeline horizontal pan calculations.
• rapidsai/quent#447: Refactored the timeline controller and ruler during the ECharts migration.

Suggested labels: bug, ui

Suggested reviewers: cmatzenbach, johanpel

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: fixing timeline alignment in the UI.
Description check	✅ Passed	The description includes the required sections, linked issue, implementation rationale, UI testing notes, and a screenshot.
Linked Issues check	✅ Passed	The changes address issue #566 by aligning timeline components and preventing ruler chip clipping.
Out of Scope Changes check	✅ Passed	All reported changes support the linked issue objectives and no unrelated code changes are identified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Note

Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.

🟡 Other comments (1)

ui/packages/@quent/components/src/timeline/TimelineController.tsx-41-42 (1)

41-42: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Derive DATAZOOM_HANDLE_INSET from the configured slider height.

TimelineController accepts a custom height, while the slider height is height - CONTROLLER_GRID_TOP - CONTROLLER_GRID_BOTTOM. ECharts sets the handle height from the slider height and derives its width from the handle icon aspect ratio. A fixed 3 pixel inset can misalign the slider at non-default heights.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/packages/`@quent/components/src/timeline/TimelineController.tsx around
lines 41 - 42, Update DATAZOOM_HANDLE_INSET in TimelineController to derive the
inset from the configured slider height, using height minus CONTROLLER_GRID_TOP
and CONTROLLER_GRID_BOTTOM and the same handle dimensions/aspect-ratio
relationship used by ECharts; remove the fixed 3-pixel value so custom
TimelineController heights remain aligned.

Source: MCP tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Other comments:
In `@ui/packages/`@quent/components/src/timeline/TimelineController.tsx:
- Around line 41-42: Update DATAZOOM_HANDLE_INSET in TimelineController to
derive the inset from the configured slider height, using height minus
CONTROLLER_GRID_TOP and CONTROLLER_GRID_BOTTOM and the same handle
dimensions/aspect-ratio relationship used by ECharts; remove the fixed 3-pixel
value so custom TimelineController heights remain aligned.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Enterprise

Run ID: 418f450b-13b7-4478-8299-e2f8d0e54608

📥 Commits

Reviewing files that changed from the base of the PR and between c0e7b60 and 80c41c2.

📒 Files selected for processing (3)

• ui/packages/@quent/components/src/timeline/TimelineController.tsx
• ui/packages/@quent/components/src/timeline/TimelineRuler.tsx
• ui/packages/@quent/components/src/timeline/types.ts

[johallar]

/merge