Skip to content

Conversation

@codecae
Copy link
Contributor

@codecae codecae commented Aug 12, 2025

The current TaskName rendering utilizes standard --chakra-spacing vars for paddingLeft styling. There are limitations with these variables as they do not have enough precision to be used above 5 levels of depth. At level 6 and beyond, the calculation attempts to specify values that do not exist, so the padding falls back to pixels. For example, at level 6, the depth is 5, resulting in a padding calculation of 5 * 3 + 2 . When passed as paddingLeft, it attempts to resolve to --chakra-spacing-17 which does not exist, so it falls back to 17px.

Code to reproduce issue:

import datetime
from airflow.sdk import dag, task, task_group

@dag(
    dag_id="LevelTest",
    schedule=None,
    start_date=datetime.datetime(2025,1,1,0,0,0),
)
def _dag() -> None:
    @task_group
    def level1() -> None:
        @task_group
        def level2() -> None:
            @task_group
            def level3() -> None:
                @task_group
                def level4() -> None:
                    @task_group
                    def level5() -> None:
                        @task
                        def bar() -> None:
                            pass
                        bar()
                        @task_group
                        def level6() -> None:
                            @task
                            def foo() -> None:
                                pass
                            foo()
                        level6()
                    level5()
                level4()
            level3()
        level2()
    level1()
_dag()

Rendering issue in dag view:
image

This change calculates the rem value to mimic the --chakra-spacing variables without being bound to a specific list of values.

Resolved issue in dag view:
image

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 12, 2025
@bbovenzi bbovenzi added this to the Airflow 3.0.5 milestone Aug 12, 2025
@bbovenzi
Copy link
Contributor

Good catch. Just need to resolve conflicts

@codecae codecae force-pushed the fix/chakra_spacing_limit branch from 2422165 to 811be42 Compare August 12, 2025 17:24
@codecae
Copy link
Contributor Author

codecae commented Aug 12, 2025

Good catch. Just need to resolve conflicts

Fixed!

@codecae codecae force-pushed the fix/chakra_spacing_limit branch from 811be42 to 6276b87 Compare August 12, 2025 17:52
@bbovenzi bbovenzi merged commit ee10bbb into apache:main Aug 12, 2025
53 checks passed
@codecae codecae deleted the fix/chakra_spacing_limit branch August 12, 2025 18:43
kaxil pushed a commit that referenced this pull request Aug 13, 2025
…ars (#54419)

Co-authored-by: Curtis Bangert <bangert.curtis+git@gmail.com>
(cherry picked from commit ee10bbb)
@pierrejeambrun
Copy link
Member

@bbovenzi we need to manually create the backport PR if we target next minor. (We can also tag it and re-run the workflow too)

@bbovenzi bbovenzi modified the milestones: Airflow 3.0.5, Airflow 3.1.0 Aug 18, 2025
@bbovenzi
Copy link
Contributor

@pierrejeambrun 3.1.0 should be released soon. I'm ok with bumping it to the minor release unless someone wants to take the time to manually backport

@pierrejeambrun
Copy link
Member

Sounds good to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants