Graph lines disappears at lower zoom levels (component:ui)

[krokofant]

Checklist:

• I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• I've included steps to reproduce the bug.
• I've pasted the output of argocd version.

Describe the bug
The graph lines between the graph nodes should be visible at different zoom levels.

To Reproduce
Open an app that contains a resource tree like a deployment and use the argo zoom controls to zoom out.

Expected behavior
The graph lines should be visible.

Screenshots

Version

argocd-server: v2.12.3+6b9cd82
  BuildDate: 2024-08-27T11:57:48Z
  GitCommit: 6b9cd828c6e9807398869ad5ac44efd2c28422d6
  GitTreeState: clean
  GoVersion: go1.22.4
  Compiler: gc
  Platform: linux/amd64
  Kustomize Version: v5.4.2 2024-05-22T15:19:38Z
  Helm Version: v3.15.2+g1a500d5
  Kubectl Version: v0.29.6
  Jsonnet Version: v0.20.0

Logs

Paste any relevant application logs here.

[krokofant]

Part solution for the css is tree line transform needs to implement counter scaling like scale(calc(1/${props.zoom})).
But then placement and/or width/height is a bit off

[linghaoSu]

I'm interested in this. Could I take it up?

[krokofant]

@linghaoSu If you're asking me then yes 😁

[linghaoSu]

The rendering behavior appears to vary across browsers. Testing revealed the following:

• In Chrome, the content rendered normally without issues.
• In Safari, however, two specific scenarios were observed:
  • When the device pixel ratio (DPR) is 1 and the zoom level is 90% or less, some edges become invisible.
  • When the DPR is 2 and the zoom level is 40% or less, a similar issue occurs with some edges disappearing.

[linghaoSu]

Hi @krokofant,

Could you let me know which browser, version you're using?

[krokofant]

Hi @krokofant,

Could you let me know which browser, version you're using?

I forgot that crucial information. I'm using Firefox Developer Edition (latest/probably 132.0beta, can't check now) on macOS. Tested on a 1440p monitor.