plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

Description

@os-warren

Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

Symptom

Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

task names truncated to about seven characters

Measurement

Same page, two viewport widths, read from the DOM (all values px):

viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
14403209980802486453 / 260
192032099808024134453 / 260

Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

Two contributors, both on current main

1. The default caps at 320px regardless of how much room exists.

functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

// Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

Proof that width is the whole story

Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

the same rows with the splitter dragged to 580px

Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

Why an application author cannot ship the fix

taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

Reproduction

  1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
  2. Load it at 1280px or wider.
  3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

Suggested directions — maintainer's call, none proposed as decided

  • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
  • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
  • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

Related: #7070 (gantt/timeline date-axis findings).

Metadata

Metadata

Labels

bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
     blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
    }
    } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
    })();
    (function(){
    try {
    var __m = "github.com";
    var __re = new RegExp('^' + "github\\.com" + '
    
    Skip to content

    plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

    Description

    @os-warren

    Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

    Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

    Symptom

    Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

    task names truncated to about seven characters

    Measurement

    Same page, two viewport widths, read from the DOM (all values px):

    viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
    14403209980802486453 / 260
    192032099808024134453 / 260

    Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

    Two contributors, both on current main

    1. The default caps at 320px regardless of how much room exists.

    functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

    2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

    // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

    This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

    Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

    Proof that width is the whole story

    Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

    the same rows with the splitter dragged to 580px

    Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

    Why an application author cannot ship the fix

    taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

    The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

    Reproduction

    1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
    2. Load it at 1280px or wider.
    3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

    Suggested directions — maintainer's call, none proposed as decided

    • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
    • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
    • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

    A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

    Related: #7070 (gantt/timeline date-axis findings).

    Metadata

    Metadata

    Labels

    bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
      Skip to content

      plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

      Description

      @os-warren

      Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

      Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

      Symptom

      Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

      task names truncated to about seven characters

      Measurement

      Same page, two viewport widths, read from the DOM (all values px):

      viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
      14403209980802486453 / 260
      192032099808024134453 / 260

      Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

      Two contributors, both on current main

      1. The default caps at 320px regardless of how much room exists.

      functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

      2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

      // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

      This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

      Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

      Proof that width is the whole story

      Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

      the same rows with the splitter dragged to 580px

      Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

      Why an application author cannot ship the fix

      taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

      The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

      Reproduction

      1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
      2. Load it at 1280px or wider.
      3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

      Suggested directions — maintainer's call, none proposed as decided

      • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
      • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
      • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

      A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

      Related: #7070 (gantt/timeline date-axis findings).

      Metadata

      Metadata

      Labels

      bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

      Type

      No type

      Projects

      No projects

        Milestone

        No milestone

        Relationships

        None yet

        Development

        No branches or pull requests

        Issue actions

        , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
        Skip to content

        plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

        Description

        @os-warren

        Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

        Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

        Symptom

        Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

        task names truncated to about seven characters

        Measurement

        Same page, two viewport widths, read from the DOM (all values px):

        viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
        14403209980802486453 / 260
        192032099808024134453 / 260

        Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

        Two contributors, both on current main

        1. The default caps at 320px regardless of how much room exists.

        functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

        2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

        // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

        This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

        Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

        Proof that width is the whole story

        Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

        the same rows with the splitter dragged to 580px

        Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

        Why an application author cannot ship the fix

        taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

        The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

        Reproduction

        1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
        2. Load it at 1280px or wider.
        3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

        Suggested directions — maintainer's call, none proposed as decided

        • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
        • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
        • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

        A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

        Related: #7070 (gantt/timeline date-axis findings).

        Metadata

        Metadata

        Labels

        bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

        Type

        No type

        Projects

        No projects

          Milestone

          No milestone

          Relationships

          None yet

          Development

          No branches or pull requests

          Issue actions

          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
          Skip to content

          plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

          Description

          @os-warren

          Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

          Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

          Symptom

          Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

          task names truncated to about seven characters

          Measurement

          Same page, two viewport widths, read from the DOM (all values px):

          viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
          14403209980802486453 / 260
          192032099808024134453 / 260

          Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

          Two contributors, both on current main

          1. The default caps at 320px regardless of how much room exists.

          functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

          2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

          // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

          This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

          Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

          Proof that width is the whole story

          Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

          the same rows with the splitter dragged to 580px

          Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

          Why an application author cannot ship the fix

          taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

          The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

          Reproduction

          1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
          2. Load it at 1280px or wider.
          3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

          Suggested directions — maintainer's call, none proposed as decided

          • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
          • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
          • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

          A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

          Related: #7070 (gantt/timeline date-axis findings).

          Metadata

          Metadata

          Labels

          bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

          Type

          No type

          Projects

          No projects

            Milestone

            No milestone

            Relationships

            None yet

            Development

            No branches or pull requests

            Issue actions

            , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
            Skip to content

            plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

            Description

            @os-warren

            Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

            Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

            Symptom

            Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

            task names truncated to about seven characters

            Measurement

            Same page, two viewport widths, read from the DOM (all values px):

            viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
            14403209980802486453 / 260
            192032099808024134453 / 260

            Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

            Two contributors, both on current main

            1. The default caps at 320px regardless of how much room exists.

            functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

            2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

            // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

            This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

            Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

            Proof that width is the whole story

            Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

            the same rows with the splitter dragged to 580px

            Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

            Why an application author cannot ship the fix

            taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

            The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

            Reproduction

            1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
            2. Load it at 1280px or wider.
            3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

            Suggested directions — maintainer's call, none proposed as decided

            • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
            • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
            • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

            A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

            Related: #7070 (gantt/timeline date-axis findings).

            Metadata

            Metadata

            Labels

            bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

            Type

            No type

            Projects

            No projects

              Milestone

              No milestone

              Relationships

              None yet

              Development

              No branches or pull requests

              Issue actions

              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
              Skip to content

              plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

              Description

              @os-warren

              Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

              Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

              Symptom

              Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

              task names truncated to about seven characters

              Measurement

              Same page, two viewport widths, read from the DOM (all values px):

              viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
              14403209980802486453 / 260
              192032099808024134453 / 260

              Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

              Two contributors, both on current main

              1. The default caps at 320px regardless of how much room exists.

              functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

              2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

              // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

              This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

              Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

              Proof that width is the whole story

              Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

              the same rows with the splitter dragged to 580px

              Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

              Why an application author cannot ship the fix

              taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

              The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

              Reproduction

              1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
              2. Load it at 1280px or wider.
              3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

              Suggested directions — maintainer's call, none proposed as decided

              • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
              • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
              • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

              A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

              Related: #7070 (gantt/timeline date-axis findings).

              Metadata

              Metadata

              Labels

              bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

              Type

              No type

              Projects

              No projects

                Milestone

                No milestone

                Relationships

                None yet

                Development

                No branches or pull requests

                Issue actions

                , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
                Skip to content

                plugin-gantt: the task list is capped at 320px and its Start/End columns take 160px of that, so task names get 53px and truncate to ~7 characters while 864px of chart sits empty #7204

                Description

                @os-warren

                Found in a browser pass over a real application's gantt view (objectstack-ai/duly#62). Filed unassigned, not claiming.

                Measured on @objectstack/console 17.2.0 (objectui 190fbd01d061) in Chromium 1194. Re-checked against current main84ffdbcbb33762b5488742fb902faf45a3742e93: both functions below are unchanged there.

                Symptom

                Every task name truncates to about seven characters. Two rows reading Emis… and Emis… with different dates are not distinguishable, which defeats the view.

                task names truncated to about seven characters

                Measurement

                Same page, two viewport widths, read from the DOM (all values px):

                viewporttask-list panelname cellStart colEnd colopen btnchart areatitle span client / needed
                14403209980802486453 / 260
                192032099808024134453 / 260

                Site environmental audit — Northgate needs 260px and is given 53px. The panel does not grow with the viewport: at 1920 the chart gains 480px and the name column gains nothing.

                Two contributors, both on current main

                1. The default caps at 320px regardless of how much room exists.

                functiontaskListWidthForContainer(width: number){if(width<640)return140;if(width<1024)return220;return320;}

                2. At that default, the Start/End sub-columns switch on and take 160 of the 320.

                // Show the Start/End sub-columns only when the task list is wide enough that// the title still has room. Below this threshold the title would collapse to// a few pixels (issue: bars rendered but names invisible).functionshowStartEndColumns(taskListWidth: number){returntaskListWidth>=280;}

                This is the sharper half, and its own comment states the intent it inverts. The threshold protects the narrow cases (140 and 220) and then produces the very outcome it names at the default wide case: 320 clears the threshold by 40px, and the columns it admits cost 160px. The title is left with 53px — "a few pixels", by the comment's own standard.

                Worth noting the 160px buys a second copy of information already on the row: each row renders 8/26 → 9/2 as a sublabel directly under the title.

                Proof that width is the whole story

                Dragging the splitter to 580px gives the title exactly the 260px it asked for, and every name becomes readable — same data, same page, same build:

                the same rows with the splitter dragged to 580px

                Measured across that drag: panel 320 to 580, title client width 53 to 260, needed 260 throughout.

                Why an application author cannot ship the fix

                taskListWidth is only ever seeded from the persisted layout — that is, from a previous user drag in that browser's localStorage. There is no authorable path to it: the spec's GanttConfigSchema declares 19 keys (startDateField, endDateField, titleField, progressField, dependenciesField, colorField, parentField, typeField, baselineStartField, baselineEndField, groupByField, resourceView, assigneeField, effortField, capacity, tooltipFields, quickFilters, autoZoomToFilter, viewMode) and none of them is a width. So today the remedy exists per user, per browser, and cannot be shipped with the app.

                The gantt block is a passthrough object, so an invented gantt.taskListWidth would pass author-time validation and be silently ignored. That is precisely why this is filed rather than authored around.

                Reproduction

                1. Any gantt view whose titleField holds real-world names (25 to 40 characters).
                2. Load it at 1280px or wider.
                3. Every name truncates in the first two words while the chart area holds 850px or more of empty grid.

                Suggested directions — maintainer's call, none proposed as decided

                • A. Size the default from the container rather than capping it — a share of the width, clamped, so a 1920px screen spends some of its extra 480px on names.
                • B. Raise the Start/End threshold so the two date columns appear only when the title genuinely has room after paying for them (their combined 160px plus a legible title, so roughly 440px, not 280px) — and consider whether they should default off at all, given the row already prints the same dates as a sublabel.
                • C. Declare a width key on the gantt block so an author can ship a sensible default for their own data. Weakest on its own: it makes every author configure their way out of a bad default, but it is the one that also serves apps whose names are unusually long.

                A and B are independent and both cheap; either alone lifts the title above the "few pixels" the comment already identifies as the failure.

                Related: #7070 (gantt/timeline date-axis findings).

                Metadata

                Metadata

                Labels

                bugSomething isn't workingdomain:uiobjectui ui stream: fix lands on the published library or apps — objectui execution seatpriority:p2

                Type

                No type

                Projects

                No projects

                  Milestone

                  No milestone

                  Relationships

                  None yet

                  Development

                  No branches or pull requests

                  Issue actions