[FLINK-39503][runtime-web] Auto-fit Job Overview DAG height and add recenter control

[spuru9]

What is the purpose of the change

The Job Overview page's DAG graph opens at a fixed default height (500px). A horizontal divider lets users drag it, but until they do, the default doesn't adapt to the viewport — it feels cramped on shorter screens and leaves usable space unused on taller ones. Users who pan or zoom the DAG also have no quick way to restore its centered view.

This pull request makes the default graph height auto-fit the viewport and adds a recenter affordance.

Brief change log

• Default graph height auto-fits the viewport (clamp(280, innerHeight * 0.4, 500)); preserved once the user drags the divider.
• Recenter button (aim icon) and Ctrl+Space shortcut invoke the existing moveToCenter().

Verifying this change

UI-only change, no unit tests. Verified manually: graph height adapts on load and window resize; manual drag is preserved; recenter button and shortcut both re-center the DAG after pan/zoom.

Before (Default opening in MacBook 13" 100%):

After:

Added for recentering and moving to the default zoom.

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? yes (minor UI affordances: auto-fit graph height + recenter button/shortcut)
• If yes, how is the feature documented? not documented — visible UI affordances only

---

Was generative AI tooling used to co-author this PR?

• Yes (Claude Code / Claude Opus 4.7)

Generated-by: Claude Code (Claude Opus 4.7)

[spuru9]

@och5351 Can you help check this. Some minor changes in job page as told.

[flinkbot]

CI report:

• 3c37da3 UNKNOWN
• 2a6dfaa Azure: SUCCESS

Bot commands

The @flinkbot bot supports the following commands:

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

[och5351]

Hi, @spuru9 !
Thx for mention to me.

It looks good to me.

BTW, pressing the fn + ctrl + space keys works on a Mac.

[och5351]

Could you please run lint?

npm run lint