Make rendering of `<ecosystem>/<package>` on website less ambiguous

Currently, on the `/list` page, the listed packages are rendered as `/` (e.g. `PyPI/numpy`)
This can cause some confusion:
- Some ecosystems allow for a `:` suffix (VSCode), which makes these strings look like URLs when they are not actually valid (e.g. `VSCode:https://open-vsx.org/SIRILMP.dark-theme-sm`, per #4505)
- In some ecosystems, package names can contain slashes (e.g. `npm/@babel/runtime`), and there's nothing in the schema inherently preventing ecosystem names from containing slashes either (and with the registries they already do), so it's not inherently clear which part is which.

We should format these better so that the separation of the ecosystem and package name are clearer.

One slight issue - with #4469 the website uses the `ListedVulnerability` entity for this page, which has the `packages` field pre-generated with `/` (and I don't think we can easily split these without the referring to the original records). We'd need to change/add to this field so separate the ecosystem and package names and regenerate all the entities (and be careful when doing the release cutover).