humit0 opened a new issue #19362:
URL: https://github.com/apache/airflow/issues/19362


   ### Apache Airflow version
   
   2.2.0
   
   ### Operating System
   
   Centos 7
   
   ### Versions of Apache Airflow Providers
   
   _No response_
   
   ### Deployment
   
   Other 3rd-party Helm chart
   
   ### Deployment details
   
   _No response_
   
   ### What happened
   
   I could not see full task name, when task name is too long.
   
   
![image](https://user-images.githubusercontent.com/8676247/139811585-ce905fde-1d8d-465e-ab9f-c31c905bc13d.png)
   
   ### What you expected to happen
   
   Needs to space between task name and task run history
   
   
![image](https://user-images.githubusercontent.com/8676247/139811813-b869833b-de01-4961-9fda-3d6e0c3558b2.png)
   
   Or, limit redered task name length and see full name when hover on task name
   
   ### How to reproduce
   
   _No response_
   
   ### Anything else
   
   `sqaureX` is independent of task name.
   
https://github.com/apache/airflow/blob/2.2.0/airflow/www/static/js/tree.js#L78
   
   Calculating `squareX` with pre-rendered task name length by using below code 
looks good for me.
   
   https://stackoverflow.com/a/35373030
   ```js
   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 ("Arial", "Helvetica", 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
       };
   })();
   ```
   
   ### Are you willing to submit PR?
   
   - [X] Yes I am willing to submit a PR!
   
   ### Code of Conduct
   
   - [X] I agree to follow this project's [Code of 
Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


Reply via email to