@@ -0,0 +1,10 @@
+---
+'@object-ui/plugin-timeline': patch
+---
+
+fix(plugin-timeline): a gantt-variant timeline draws its headers and bars on one continuous axis, so each bar lines up under its header (objectui#11079)
+
+- **Bars now sit under their headers.** The header row was one equal-width column per unit from the first date to the last date inclusive, while the bars were measured on the span from the first date to the last date, one unit shorter. So every bar after the first sat off its column: on a day axis over October 5th to 7th, the bar starting on the 6th was drawn halfway across the chart under a column that starts at one third. Both are now drawn on one axis, from the start of the first unit to the end of the last. A bar that starts on a day, a month or a quarter begins exactly where that unit's header begins.
+- **Each header is as wide as its unit is long.** Hour, day and week columns are equal. A month column is as wide as its days, so February is narrower than January, and a quarter or a year is as wide as its days. Across a daylight-saving change a day column is 23 or 25 hours wide, as the day is.
+- **Each unit starts on its boundary.** A month axis from January 15th to April 10th now has an April column, and one from January 31st no longer skips February. `generateTimeScaleHeaders`, which the package exports, returns these labels.
+- A task that starts and ends at the same instant is a zero-width bar at that instant, as it already was on any plan with two distinct dates. A plan whose only dates were one such day used to draw that bar across the whole chart.
@@ -342,6 +342,8 @@ const longProject: TimelineSchema['scale'] = 'month'   // long projects
 
 A date-only bar date, `minDate` or `maxDate` (`2024-01-15`) names a calendar day, so the axis headers, the bar positions and the bar tooltips all place it on that day in every viewer's time zone. A value with a time part is an instant and sits at its hour in the viewer's day. A plan with no bar dates and no pinned range shows a one-day axis on the viewer's today.
 
+The headers and the bars share one axis. It runs from the start of the unit that holds the first date to the end of the unit that holds the last. Each header is as wide as its unit is long: hour, day and week columns are equal, and a month is as wide as its days. So a bar lines up under the header of the unit it starts in.
+
 ## Customization
 
 ### Custom Icons
 
@@ -87,6 +87,8 @@ afterEach(() => {
 interface Drawn {
   /** The axis header cells, in order. */
   axis: string[];
+  /** Each axis header cell's inline width, in order (objectui#11079). */
+  columns: string[];
   /** Each bar's `left` / `width`, in order. */
   bars: Array<{ left: string; width: string }>;
   /** Each bar's tooltip, in order. */
@@ -107,6 +109,9 @@ function draw(schema: Record<string, unknown>): Drawn {
     axis: Array.from(container.querySelectorAll('.border-r.text-xs.font-medium.text-center')).map(
       (n) => n.textContent ?? '',
     ),
+    columns: Array.from(
+      container.querySelectorAll<HTMLElement>('.border-r.text-xs.font-medium.text-center'),
+    ).map((n) => n.style.width),
     bars: bars.map((b) => ({ left: b.style.left, width: b.style.width })),
     titles: bars.map((b) => b.getAttribute('title') ?? ''),
     refusal: container.querySelector('[data-testid="timeline-unusable-date-range"]')?.textContent ?? null,
@@ -188,9 +193,12 @@ describe('timeline gantt, in the suite zone (objectui#10866)', () => {
   it('a computed day axis over date-only bars reads their days', () => {
     const drawn = draw(COMPUTED);
     expect(drawn.axis).toEqual(['Oct 5', 'Oct 6', 'Oct 7']);
+    // objectui#11079: the bars are measured on the axis the headers draw,
+    // October 5th to the end of October 7th, three days — not on the two days
+    // from the first midnight to the last, which put the second bar at 50%.
     expect(drawn.bars).toEqual([
-      { left: '0%', width: '50%' },
-      { left: '50%', width: '50%' },
+      { left: '0%', width: `${(1 / 3) * 100}%` },
+      { left: `${(1 / 3) * 100}%`, width: `${(1 / 3) * 100}%` },
     ]);
   });
 
@@ -238,20 +246,27 @@ describe.runIf(DRIVEN)('timeline gantt west of UTC (objectui#10866)', () => {
     enter(WEST);
     const drawn = draw(COMPUTED);
     expect(drawn.axis).toEqual(['Oct 5', 'Oct 6', 'Oct 7']);
+    // objectui#11079: the bars are measured on the axis the headers draw,
+    // October 5th to the end of October 7th, three days — not on the two days
+    // from the first midnight to the last, which put the second bar at 50%.
     expect(drawn.bars).toEqual([
-      { left: '0%', width: '50%' },
-      { left: '50%', width: '50%' },
+      { left: '0%', width: `${(1 / 3) * 100}%` },
+      { left: `${(1 / 3) * 100}%`, width: `${(1 / 3) * 100}%` },
     ]);
   });
 
   it('a pinned day axis reads its days; a date-only bar sits on its day and an instant bar at its local hour, 21:00 on the 5th', () => {
     enter(WEST);
     const drawn = draw(PINNED_MIXED);
     expect(drawn.axis).toEqual(['Oct 5', 'Oct 6', 'Oct 7']);
+    // objectui#11079: on the 72-hour axis the headers draw, October 5th to the
+    // end of the 7th. The day bar is the second day, 24 hours from the start;
+    // the instant bar starts 21 hours in and is 6 hours long.
     expect(drawn.bars).toEqual([
-      { left: '50%', width: '50%' },
-      { left: '43.75%', width: '12.5%' },
+      { left: `${(24 / 72) * 100}%`, width: `${(24 / 72) * 100}%` },
+      { left: `${(21 / 72) * 100}%`, width: `${(6 / 72) * 100}%` },
     ]);
+    expect(drawn.bars[0].left).toBe(drawn.columns[0]);
   });
 
   it('the min-over-max guard reads what the axis reads: a pinned end that is the evening before the pinned start here is refused', () => {
@@ -262,6 +277,24 @@ describe.runIf(DRIVEN)('timeline gantt west of UTC (objectui#10866)', () => {
     expect(drawn.bars).toEqual([]);
   });
 
+  it('a day axis across the spring DST change draws the 23-hour day as a narrower column, and a bar from that day starts on it (objectui#11079)', () => {
+    enter(WEST);
+    // March 8th 2026 is 23 hours long here: the clocks go forward at 02:00.
+    const drawn = draw({
+      scale: 'day',
+      minDate: '2026-03-07',
+      maxDate: '2026-03-09',
+      items: [{ label: 'Row', items: [{ title: 'Bar', startDate: '2026-03-08', endDate: '2026-03-09' }] }],
+    });
+    expect(drawn.axis).toEqual(['Mar 7', 'Mar 8', 'Mar 9']);
+    expect(drawn.columns).toEqual([
+      `${(24 / 71) * 100}%`,
+      `${(23 / 71) * 100}%`,
+      `${(24 / 71) * 100}%`,
+    ]);
+    expect(drawn.bars).toEqual([{ left: drawn.columns[0], width: drawn.columns[1] }]);
+  });
+
   it("the empty plan's axis is the viewer's today, October 5th, not the UTC day", () => {
     enter(WEST);
     expect(emptyPlanAxis()).toEqual(['Oct 5']);
@@ -286,20 +319,27 @@ describe.runIf(DRIVEN)('timeline gantt east of UTC, the control (objectui#10866)
     enter(EAST);
     const drawn = draw(COMPUTED);
     expect(drawn.axis).toEqual(['Oct 5', 'Oct 6', 'Oct 7']);
+    // objectui#11079: the bars are measured on the axis the headers draw,
+    // October 5th to the end of October 7th, three days — not on the two days
+    // from the first midnight to the last, which put the second bar at 50%.
     expect(drawn.bars).toEqual([
-      { left: '0%', width: '50%' },
-      { left: '50%', width: '50%' },
+      { left: '0%', width: `${(1 / 3) * 100}%` },
+      { left: `${(1 / 3) * 100}%`, width: `${(1 / 3) * 100}%` },
     ]);
   });
 
   it('a pinned day axis reads its days; a date-only bar sits on its day and an instant bar at its local hour, 12:00 on the 6th', () => {
     enter(EAST);
     const drawn = draw(PINNED_MIXED);
     expect(drawn.axis).toEqual(['Oct 5', 'Oct 6', 'Oct 7']);
+    // objectui#11079: on the 72-hour axis the headers draw, October 5th to the
+    // end of the 7th. The day bar is the second day, 24 hours from the start;
+    // the instant bar starts 36 hours in and is 6 hours long.
     expect(drawn.bars).toEqual([
-      { left: '50%', width: '50%' },
-      { left: '75%', width: '12.5%' },
+      { left: `${(24 / 72) * 100}%`, width: `${(24 / 72) * 100}%` },
+      { left: `${(36 / 72) * 100}%`, width: `${(6 / 72) * 100}%` },
     ]);
+    expect(drawn.bars[0].left).toBe(drawn.columns[0]);
   });
 
   it('the min-over-max guard: the same pinned pair is in order here, and draws', () => {