Airflow Logo hides half of the page

[kaxil]

Looks like a side-effect of #11018

Airflow Logo almost takes up half of the page on current master:

cc @ryanahamilton

[ryanahamilton]

This would surely be a side-effect of #11018, but I'm unable to reproduce in Chrome, Safari, or Firefox on Mac. I can certainly provide a simple solution for this if it is indeed a problem.

[yuqian90]

I could reproduce this in Chrome on Mac.

@ryanahamilton I think there are two issues at least.

1. For the problem @kaxil reported, I think it's caused by the javascript code in graph.html, tree.html, etc that does this. These code picks up the svg tag in the header as well and transform it. That's why it became distorted. If you could identify all these code and change them to select something more specific that should fix it, e.g. d3.select("#svg_container svg") or something along that line. It's not clear to me why you had issues reproducing this though.

  d3.select("svg")
  .insert("g")
...

2. Unrelated to 1, even in the home page, the alignment of the logo seems off. Looks like this for me. I believe this is a simpler problem than 1.

[turbaszek]

Go big or go home 😸

[ryanahamilton]

I can see it now—I didn't know it was view-specific and hadn't ventured off of the home page in my testing.

@yuqian90 yes, that is indeed the issue. Generic selectors that assumed another SVG element would never be added to the page. I'll fix this.

As for (2), you. probably just need to run airflow/www/compile_assets.sh—there is a CSS adjustment of the padding around the logo in main.css that you don't appear to have.

[ryanahamilton]

Graph view is also drawing teensy little charts on top of the logo 🧐