@@ -0,0 +1,12 @@
+---
+'@object-ui/plugin-kanban': patch
+'@object-ui/plugin-gantt': patch
+---
+
+fix(plugin-kanban, plugin-gantt): a phone kanban opens on its first column that holds a card, and a narrow gantt bar shows its title beside the bar
+
+Clause-②: no
+Metadata-protocol: none
+
+- **Kanban.** At phone width the board shows one column at a time, so a pipeline whose first stages were empty opened on an empty column. On its first settled load the board now brings the first column that holds a card into view. The column order does not change, a board whose first column holds a card opens as before, and a column already in view is never scrolled to. The board never moves after the viewer touches, swipes, scrolls or types on it. Swimlane boards are unchanged.
+- **Gantt.** A bar too narrow to show its title (a week or month bar on a phone, 18 to 63px wide) drew an ellipsis or nothing. It now draws the whole title beside its end. A bar with room keeps its title inside, cut with an ellipsis as before. This applies to task bars and summary bars; milestones and the PNG/PDF export are unchanged.
@@ -0,0 +1,112 @@
+/**
+ * #27418 — at phone width a gantt bar carries its title.
+ *
+ * Measured in Chromium at 390x844 before the fix: a month-view bar is 18px
+ * wide, its in-bar title got 0px of room after the bar's `px-2`, and drew
+ * nothing — not even an ellipsis; a 31–63px week bar showed an ellipsis and a
+ * letter or two. A phone opens with the task list collapsed, so the bar was
+ * the only place the title could appear. Now a bar too narrow for its title
+ * draws it beside its end, whole; a bar with room keeps the in-bar label.
+ *
+ * jsdom does no layout, but the bar's width is an inline style computed from
+ * the view's column width (`window.innerWidth` stands in for the container),
+ * so placement is readable here without a browser.
+ */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { GanttView, type GanttTask } from './GanttView';
+
+const LONG_TITLE = 'Q4 Enterprise Product Launch Webinar Series — APAC Region';
+
+function setWidth(width: number) {
+  Object.defineProperty(window, 'innerWidth', { value: width, configurable: true });
+}
+
+beforeEach(() => window.localStorage.clear());
+afterEach(cleanup);
+
+function makeTask(id: string, title: string, start: string, end: string, extra: Partial<GanttTask> = {}): GanttTask {
+  return { id, title, start: new Date(start), end: new Date(end), progress: 0, ...extra };
+}
+
+function renderView(tasks: GanttTask[], viewMode: 'day' | 'week' | 'month') {
+  return render(
+    <div style={{ width: window.innerWidth, height: 600 }}>
+      <GanttView
+        tasks={tasks}
+        viewMode={viewMode}
+        startDate={new Date('2026-10-01T00:00:00.000Z')}
+        endDate={new Date('2026-12-31T00:00:00.000Z')}
+      />
+    </div>,
+  );
+}
+
+function barWidth(container: HTMLElement, id: string) {
+  const bar = container.querySelector<HTMLElement>(`[data-testid="gantt-task-bar-${id}"], [data-testid="gantt-summary-bar-${id}"]`);
+  return parseFloat(bar?.style.width ?? 'NaN');
+}
+
+function label(container: HTMLElement, id: string) {
+  const el = container.querySelector<HTMLElement>(`[data-testid="gantt-bar-label-${id}"]`);
+  expect(el, `bar ${id} draws a label`).not.toBeNull();
+  return el!;
+}
+
+describe('a gantt bar carries its title at phone width (#27418)', () => {
+  it('draws a narrow bar’s title beside it, whole', () => {
+    setWidth(390);
+    const { container } = renderView([makeTask('c1', LONG_TITLE, '2026-10-05T00:00:00', '2026-10-09T00:00:00')], 'month');
+    // The fixture really is the measured narrow bar, not a wide one.
+    expect(barWidth(container, 'c1')).toBeLessThan(40);
+    const el = label(container, 'c1');
+    expect(el.dataset.placement).toBe('beside');
+    expect(el.textContent).toBe(LONG_TITLE);
+    // Beside the bar it is never cut: no truncation, one line.
+    expect(el.className).not.toMatch(/\btruncate\b/);
+    expect(el.className).toMatch(/\bwhitespace-nowrap\b/);
+    expect(el.className).toMatch(/\bleft-full\b/);
+  });
+
+  it('keeps a short title inside a narrow bar it fits in', () => {
+    setWidth(1280);
+    const { container } = renderView([makeTask('s', 'QA', '2026-10-05T00:00:00', '2026-10-09T00:00:00')], 'week');
+    expect(barWidth(container, 's')).toBeLessThan(16 + 96);
+    expect(label(container, 's').dataset.placement).toBe('inside');
+  });
+
+  it('keeps a long title inside a bar with room, ending in an ellipsis', () => {
+    setWidth(1280);
+    const { container } = renderView([makeTask('w', LONG_TITLE, '2026-10-05T00:00:00', '2026-10-09T00:00:00')], 'day');
+    expect(barWidth(container, 'w')).toBeGreaterThanOrEqual(16 + 96);
+    const el = label(container, 'w');
+    expect(el.dataset.placement).toBe('inside');
+    expect(el.className).toMatch(/\btruncate\b/);
+  });
+
+  it('draws a narrow summary bar’s title beside it too', () => {
+    setWidth(390);
+    const { container } = renderView(
+      [
+        makeTask('p', LONG_TITLE, '2026-10-05T00:00:00', '2026-10-06T00:00:00'),
+        makeTask('k', 'Child', '2026-10-05T00:00:00', '2026-10-07T00:00:00', { parent: 'p' }),
+      ],
+      'month',
+    );
+    const el = label(container, 'p');
+    expect(el.dataset.placement).toBe('beside');
+    expect(el.textContent).toBe(LONG_TITLE);
+  });
+
+  it('ellipsizes a long title in the task list (measured in Chromium, unchanged)', () => {
+    // At 390px the title cell measured text-overflow: ellipsis with
+    // scrollWidth 356 over clientWidth 91: the cell already ellipsizes. This
+    // pins the two classes that reading rests on.
+    setWidth(390);
+    const { getByTestId } = renderView([makeTask('c1', LONG_TITLE, '2026-10-05T00:00:00', '2026-10-09T00:00:00')], 'month');
+    const title = getByTestId('gantt-row-title-c1');
+    expect(title.className).toMatch(/\btruncate\b/);
+    expect(title.parentElement!.className).toMatch(/\bmin-w-0\b/);
+  });
+});
@@ -187,6 +187,50 @@ function rowHeightForContainer(width: number) {
   return width < 640 ? 32 : 40;
 }
 
+/** The horizontal padding a bar spends before its in-bar title (`px-2`). */
+const BAR_LABEL_PADDING_W = 16;
+
+/**
+ * The least in-bar room worth a truncated title: below it the title is moved
+ * beside the bar instead. 96px holds about as much of a title as the phone
+ * task list's title cell does, so a bar never shows less of its title than
+ * the list beside it.
+ */
+const BAR_LABEL_MIN_INSIDE_W = 96;
+
+/**
+ * A title's width in the bar's 10px label font, estimated per character: a
+ * wide (CJK) character at 10px, any other at 5.5px, which is what Chromium
+ * measured for latin titles at that size. An estimate, not a measurement, so
+ * it may only decide where the title goes, never cut the title itself.
+ */
+function estimateBarLabelWidth(title: string) {
+  let width = 0;
+  for (const ch of title) width += (ch.codePointAt(0) ?? 0) > 0x2e7f ? 10 : 5.5;
+  return width;
+}
+
+/**
+ * Where a bar draws its title (#27418). Inside when the whole title fits, or
+ * when the bar has room for a readable part of it (truncated with an ellipsis,
+ * as before). Otherwise BESIDE the bar, after its end: at phone width a week
+ * or month bar is 18 to 63px wide, and a title squeezed into that showed an
+ * ellipsis or nothing at all — and with the task list collapsed, as it opens
+ * on a phone, the bar is the only place the title appears.
+ */
+function barLabelPlacement(barWidth: number, title: string): 'inside' | 'beside' {
+  const room = barWidth - BAR_LABEL_PADDING_W;
+  return room >= BAR_LABEL_MIN_INSIDE_W || estimateBarLabelWidth(title) <= room ? 'inside' : 'beside';
+}
+
+/**
+ * The title drawn beside a bar too narrow to hold it: after the bar's end, on
+ * the row's own background, never truncated (the row has the whole timeline
+ * to its right). Shared by the leaf and summary bars.
+ */
+const BESIDE_BAR_LABEL_CLASS =
+  "absolute left-full top-1/2 -translate-y-1/2 ml-1.5 whitespace-nowrap text-[10px] font-medium text-foreground pointer-events-none";
+
 /**
  * Dependency link types, MS-Project style:
  * - `fs` finish-to-start (default): predecessor must finish before this task starts
@@ -4469,9 +4513,19 @@ export function GanttView({
                               />
                             </>
                           )}
-                          <span className="relative text-[10px] text-white font-medium truncate pointer-events-none">
-                            {task.title}
-                          </span>
+                          {barLabelPlacement(liveStyle.width, task.title) === 'inside' ? (
+                            <span
+                              className="relative text-[10px] text-white font-medium truncate pointer-events-none"
+                              data-testid={`gantt-bar-label-${task.id}`}
+                              data-placement="inside"
+                            >
+                              {task.title}
+                            </span>
+                          ) : (
+                            <span className={BESIDE_BAR_LABEL_CLASS} data-testid={`gantt-bar-label-${task.id}`} data-placement="beside">
+                              {task.title}
+                            </span>
+                          )}
                           {/* Connector dots — same drag-to-link affordance as leaf
                               bars, so dependencies (3.4.5) can be drawn between
                               summary plans, not only via the right-click menu. */}
@@ -4843,10 +4897,22 @@ export function GanttView({
 
                         {/* Bar label — the task title, shown like summary bars so
                             leaf bars aren't blank. Fades out on hover to reveal the
-                            progress / drag overlay below. */}
-                        <span className="relative text-[10px] text-white font-medium truncate pointer-events-none group-hover:opacity-0 transition-opacity">
-                          {task.title}
-                        </span>
+                            progress / drag overlay below. A bar too narrow for it
+                            draws it beside its end instead (#27418), where the
+                            overlay does not reach, so that one stays put. */}
+                        {barLabelPlacement(liveStyle.width, task.title) === 'inside' ? (
+                          <span
+                            className="relative text-[10px] text-white font-medium truncate pointer-events-none group-hover:opacity-0 transition-opacity"
+                            data-testid={`gantt-bar-label-${task.id}`}
+                            data-placement="inside"
+                          >
+                            {task.title}
+                          </span>
+                        ) : (
+                          <span className={BESIDE_BAR_LABEL_CLASS} data-testid={`gantt-bar-label-${task.id}`} data-placement="beside">
+                            {task.title}
+                          </span>
+                        )}
                         {/* Hover Details / drag tooltip — overlays the title so the
                             bar's text width never shifts on hover. */}
                         <span className="absolute inset-0 flex items-center px-2 text-[10px] text-white font-medium truncate opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
 
@@ -1354,6 +1354,51 @@ function KanbanBoardInner({ columns, onCardMove, onCardClick, className, dnd, qu
     return () => el.removeEventListener('scroll', handle)
   }, [boardColumns.length])
 
+  /**
+   * Open the board on its first column that holds a card (#27418).
+   *
+   * A phone shows one column at a time, so a pipeline whose first stages are
+   * empty opened on an empty column and read as an empty board. On the FIRST
+   * load only, the flat scroller brings the first non-empty column into view.
+   * The column order is untouched, and a column already in view (the first
+   * column holds cards, or a wide board shows several) is never scrolled to.
+   *
+   * ⛔ It never moves the board after the viewer did: any pointer, touch,
+   * wheel or key input on the scroller ends it, and so does the first settled
+   * load that holds a card, whether or not it scrolled. A board that settles
+   * empty waits for its first card, unless the viewer moved first.
+   *
+   * It waits for `recordsSettled` (a column's cards are only a fact once the
+   * rows have arrived) and for `boardWidth` (the columns take their final width
+   * from it, so an offset read before it would land on the wrong column).
+   */
+  const initialColumnShownRef = React.useRef(false)
+  React.useEffect(() => {
+    const el = flatScrollRef.current
+    if (!el) return
+    const viewerMoved = () => { initialColumnShownRef.current = true }
+    const events = ['pointerdown', 'touchstart', 'wheel', 'keydown'] as const
+    for (const name of events) el.addEventListener(name, viewerMoved, { passive: true })
+    return () => { for (const name of events) el.removeEventListener(name, viewerMoved) }
+  }, [swimlaneField])
+  React.useLayoutEffect(() => {
+    if (initialColumnShownRef.current || !recordsSettled || !boardWidth) return
+    const el = flatScrollRef.current
+    if (!el) return
+    const firstFilled = boardColumns.findIndex((col) => col.cards.length > 0)
+    if (firstFilled < 0) return
+    initialColumnShownRef.current = true
+    const first = el.children[0]
+    const target = el.children[firstFilled]
+    if (firstFilled === 0 || !first || !target) return
+    const box = el.getBoundingClientRect()
+    const column = target.getBoundingClientRect()
+    if (column.left >= box.left && column.right <= box.right) return
+    // Move by the distance between the two columns, from wherever the snap
+    // rests the first one (Chromium rests a phone board at `scrollLeft: 16`).
+    el.scrollLeft += column.left - first.getBoundingClientRect().left
+  }, [recordsSettled, boardWidth, boardColumns])
+
   /**
    * The swimlane board's single horizontal scroll position (objectui#8448).
    *