Long container args and/or script source overflows in UI

[dakotalillie]

Checklist

• Double-checked my configuration.
• Tested using the latest version.
• Used the Emissary executor.

Summary

Providing a lengthy argument to a container template, or a lengthy source to a script template, causes the provided argument/source to visually overflow in the UI.

I have observed this issue in multiple versions, including:

• v3.3.6
• "latest" (master branch)

Diagnostics

Here are two YAML examples which can be used to reproduce this issue, along with screenshots of the UI for each:

apiVersion: argoproj.io/v1alpha1
kind: Workflow
metadata:
  generateName: example-
spec:
  entrypoint: example
  templates:
  - name: example
    container:
      image: ubuntu:latest
      command: [bash]
      args:
        - -c
        - |-
          # The exact contents of this script don't matter.
          # All that matters for this example is that the line is sufficiently long.
          if [ "$EXAMPLE_ENV_VAR" == "hello darkness my old friend" ]; then
            echo "Hello world!"
          fi

apiVersion: argoproj.io/v1alpha1
kind: Workflow
metadata:
  generateName: example-
spec:
  entrypoint: example
  templates:
  - name: example
    script:
      image: ubuntu:latest
      command: [bash]
      source: |-
        # The exact contents of this script don't matter.
        # All that matters for this example is that the line is sufficiently long.
        if [ "$EXAMPLE_ENV_VAR" == "hello darkness my old friend" ]; then
          echo "Hello world!"
        fi

It looks like a similar issue was addressed in #7876. Adopting the same fix for this should be straightforward. However, I wanted to check first to see whether an alternative solution might be preferable, such as using a scrollbar. Here's what two potential solutions might look like:

Screen.Recording.2022-06-04.at.6.25.27.PM.mov

Either way, I'm happy to submit a PR.

---

Message from the maintainers:

Impacted by this bug? Give it a 👍. We prioritise the issues with the most 👍.