[FLINK-27441][webfrontend] fix "nzScroll" calculations

[ferenc-csaky]

What is the purpose of the change

Fixes hidden scrollbar for some UI elements, where CSS calculate was based on a percentage. The current Angular version has a bug, so in those cases the scrollbar is hidden and scrolling is not possible.

Relevant Angular issue: NG-ZORRO/ng-zorro-antd#3090

Brief change log

Changed calc ( X% ...) to calc( Xvh ...), which solves this problem.

Verifying this change

This change is a trivial rework / code cleanup without any test coverage.

How to test

Prepare a Flink job with a number of Accumulators that cannot fit to the tab, so scrolling is required. After running the job, the "Accumulators" tab has no scrollbar. The CSS can be changed in the browser, so it can be modified on the fly to try out the fix.

Does this pull request potentially affect one of the following parts:

• Dependencies (does it add or upgrade a dependency): no
• The public API, i.e., is any changed class annotated with @Public(Evolving): no
• The serializers: no
• The runtime per-record code paths (performance sensitive): no
• Anything that affects deployment or recovery: JobManager (and its components), Checkpointing, Kubernetes/Yarn, ZooKeeper: no
• The S3 file system connector: no

Documentation

• Does this pull request introduce a new feature? no

[flinkbot]

CI report:

• bdcfcdb Azure: SUCCESS

Bot commands

The @flinkbot bot supports the following commands:

• @flinkbot run azure re-run the last Azure build

[ferenc-csaky]

@flinkbot run azure

[gaborgsomogyi]

The change looks good basically but I've some minor comments.

The current Angular version has a bug

Do we have a link for the bug? Please add it to the PR.

I would mention manual testing steps in the "Verifying this change" area. Namely on which page which UI element needs to be checked (I know it but it would be good to let others know).

Could you attach a before and after picture just to double check that we see the same thing?

I've started the manual testing...

[gaborgsomogyi]

Oh and almost forgot, please add component to the title of the PR like [FLINK-27441][webfrontend]...

[ferenc-csaky]

Thanks for the comments.

1. Yes, I linked it to the corresponding Jira, but here it is: Percentage or css:'calc()' should be added in 'nzScroll' NG-ZORRO/ng-zorro-antd#3090
2. I tested this with Accumulators. I prepared a dummy Flink job and I added 50 dummy IntCounter accumulators to it, so it would not fit to the screen. After I started the job, the "Accumulators" tab has no scrollbar. The CSS can be changed in the browser, so it is easy to test this on the fly.

Original state:

Fixed state:

[gaborgsomogyi]

LGTM. Tested manually and works as expected.

[gaborgsomogyi]

@mbalassi @gyfora could you have a look plz?

[mbalassi]

Thanks @ferenc-csaky and @gaborgsomogyi. Will merge on Monday after a quick test unless anyone disagrees.

[mbalassi]

LGTM