<h3 dir="auto">Apache Airflow version</h3>
<p dir="auto">2.2.0</p>
<h3 dir="auto">Operating System</h3>
<p dir="auto">Centos 7</p>
<h3 dir="auto">Versions of Apache Airflow Providers</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Deployment</h3>
<p dir="auto">Other 3rd-party Helm chart</p>
<h3 dir="auto">Deployment details</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">What happened</h3>
<p dir="auto">I could not see full task name, when task name is too long.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8676247/139811585-ce905fde-1d8d-465e-ab9f-c31c905bc13d.png"><img src="https://user-images.githubusercontent.com/8676247/139811585-ce905fde-1d8d-465e-ab9f-c31c905bc13d.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">What you expected to happen</h3>
<p dir="auto">Needs to space between task name and task run history</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8676247/139811813-b869833b-de01-4961-9fda-3d6e0c3558b2.png"><img src="https://user-images.githubusercontent.com/8676247/139811813-b869833b-de01-4961-9fda-3d6e0c3558b2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Or, limit redered task name length and see full name when hover on task name</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Anything else</h3>
<p dir="auto"><code class="notranslate">sqaureX</code> is independent of task name.<br>
<a href="https://github.com/apache/airflow/blob/2.2.0/airflow/www/static/js/tree.js#L78">https://github.com/apache/airflow/blob/2.2.0/airflow/www/static/js/tree.js#L78</a></p>
<p dir="auto">Calculating <code class="notranslate">squareX</code> with pre-rendered task name length by using below code looks good for me.</p>
<p dir="auto"><a href="https://stackoverflow.com/a/35373030" rel="nofollow">https://stackoverflow.com/a/35373030</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var BrowserText = (function () {
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');

    /**
     * Measures the rendered width of arbitrary text given the font size and font face
     * @param {string} text The text to measure
     * @param {number} fontSize The font size in pixels
     * @param {string} fontFace The font face (&quot;Arial&quot;, &quot;Helvetica&quot;, etc.)
     * @returns {number} The width of the text
     **/
    function getWidth(text, fontSize, fontFace) {
        context.font = fontSize + 'px ' + fontFace;
        return context.measureText(text).width;
    }

    return {
        getWidth: getWidth
    };
})();"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">BrowserText</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">canvas</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'canvas'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">getContext</span><span class="pl-kos">(</span><span class="pl-s">'2d'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">/**</span>
<span class="pl-c">     * Measures the rendered width of arbitrary text given the font size and font face</span>
<span class="pl-c">     * <span class="pl-k">@param</span> {<span class="pl-smi">string</span>} text The text to measure</span>
<span class="pl-c">     * <span class="pl-k">@param</span> {<span class="pl-smi">number</span>} fontSize The font size in pixels</span>
<span class="pl-c">     * <span class="pl-k">@param</span> {<span class="pl-smi">string</span>} fontFace The font face ("Arial", "Helvetica", etc.)</span>
<span class="pl-c">     * <span class="pl-k">@returns</span> {<span class="pl-smi">number</span>} The width of the text</span>
<span class="pl-c">     **/</span>
    <span class="pl-k">function</span> <span class="pl-en">getWidth</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">,</span> <span class="pl-s1">fontSize</span><span class="pl-kos">,</span> <span class="pl-s1">fontFace</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-c1">font</span> <span class="pl-c1">=</span> <span class="pl-s1">fontSize</span> <span class="pl-c1">+</span> <span class="pl-s">'px '</span> <span class="pl-c1">+</span> <span class="pl-s1">fontFace</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">measureText</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">width</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">getWidth</span>: <span class="pl-s1">getWidth</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Are you willing to submit PR?</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Yes I am willing to submit a PR!</li>
</ul>
<h3 dir="auto">Code of Conduct</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I agree to follow this project's <a href="https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md">Code of Conduct</a></li>
</ul>
<p dir="auto"><strong>Apache Airflow version</strong>: 2.1.2</p>
<p dir="auto"><strong>OS</strong>: Ubuntu 18.04.5</p>
<p dir="auto"><strong>Apache Airflow Provider versions</strong>:<br>
apache-airflow-providers-amazon==2.1.0<br>
apache-airflow-providers-celery==2.0.0<br>
apache-airflow-providers-ftp==2.0.0<br>
apache-airflow-providers-imap==2.0.0<br>
apache-airflow-providers-jdbc==2.0.0<br>
apache-airflow-providers-postgres==2.0.0<br>
apache-airflow-providers-sqlite==2.0.0</p>
<p dir="auto"><strong>Deployment</strong>: Helm + K8s</p>
<p dir="auto"><strong>What happened</strong>: In tree view, when the names of the tasks are long, they get behind the tree.</p>
<p dir="auto"><strong>What you expected to happen</strong>: Tree moves to the right not blocking the names of the tasks.</p>
<p dir="auto"><strong>How to reproduce it</strong>: Just create a Dag with task names that are long enough.<br>
Also depends on the dependencies, but around 60 chars do it.</p>
<p dir="auto"><strong>Anything else we need to know</strong>: It's not a blocker, but it was easier to follow the execution of some of our bigger DAGs in v2.1.0, it becomes a problem when sharing screen on videocalls or explaining something on screen. Adding a picture of how it looks like.</p>
<p dir="auto"><strong>Are you willing to submit a PR?</strong>: I'm not an expert in front end, so I'll pass this time.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19522531/130056595-1ddfcb82-d2ea-41c8-8eb2-c8873005729a.png"><img width="748" alt="Screenshot 2021-08-18 at 17 38 57" src="https://user-images.githubusercontent.com/19522531/130056595-1ddfcb82-d2ea-41c8-8eb2-c8873005729a.png" style="max-width: 100%;"></a></p>