[FLINK-3555] Web interface does not render job information properly

[bitchelov]

Before: When a window is minimized, the content turned out to be beyond

After::shipit:

[StephanEwen]

Thank you for this patch.

Could you help us validate the changed behavior, for example attach a before/after screenshot of chrome or Safari that shows the difference?

[bitchelov]

@StephanEwen Sure.

[bitchelov]

@StephanEwen is it right?

[StephanEwen]

Looks good, thanks for the nice animations!

Will merge this for 1.2 and 1.3 ...

[StephanEwen]

Sorry, I have to take a step back here:

The changes you made were directly to the resulting CSS files. These files are generated by the web build scripts, so the changes have to be made to the original files. Otherwise they will be overwritten the next time somebody re-builds the web UI. See here: https://github.com/apache/flink/blob/master/flink-runtime-web/README.md

The change to flink-runtime-web/web-dashboard/web/css/index.css is easy t put into index.styl instead. However, the change in flink-runtime-web/web-dashboard/web/css/vendor.css overwrites a style that is pulled in as a dependency. Not sure how to handle this correctly.

@uce @sachingoel0101 ot @iampeter Can probably help here.

[sachingoel0101]

Imo, the best way to achieve the change equivalent to the change to vendor.css file would be to add a new class, say, .panel-body-flowable in index.styl which defines the overflow rule, and add this class to the elements wherever needed.

[StephanEwen]

@bitchelov do you want to follow up on this pull request?

[iampeter]

I agree with @sachingoel0101 as for overrriding classes from vendor.css

[bitchelov]

@StephanEwen yeah, sure im gonna finish this pr

[aljoscha]

I'm closing this as "Abandoned", since there is no more activity and the code base has moved on quite a bit. Please re-open this if you feel otherwise and work should continue.