Swagger-UI: ugly numbered rendering of enum "allowed values"

[elipp]

Q&A

• OS: Linux
• Browser: Chrome, Firefox, probably all of them
• Version:
• Method of installation: Docker
• Swagger-UI version: 5.20.0
• Swagger/OpenAPI version: whatever's in the swaggerapi/swagger-ui:5.20.0 Docker image, OpenAPI 3.1.0

Content & configuration

Example Swagger/OpenAPI definition:

{
	"MyEnum": {
		"type": "string",
		"enum": [
			"allowedValue1",
			"allowedValue2",
			"allowedValue3",
			"allowedValue4"
		]
	}
}

Swagger-UI configuration options:

const ui = SwaggerUIBundle({
	urls: [
		{url: "https://{$DOMAIN_NAME}/api/a", name: "a"},
		{url: "https://{$DOMAIN_NAME}/api/b", name: "b"}
	],
	dom_id: '#swagger-ui',
	presets: [
		SwaggerUIBundle.presets.apis,
		SwaggerUIStandalonePreset
	],
	layout: "StandaloneLayout",
	tryItOutEnabled: true,
	validatorUrl: null,
	plugins: [
	SwaggerUIBundle.plugins.DownloadUrl
	],
	deepLinking: true
});

Describe the bug you're encountering

In Swagger-UI 5.19.0, the allowed values are rendered in a pretty listing in dotted-border boxes, and 5.20.x onwards, they render as:

#0"allowedValue1"
#1"allowedValue2"
#2"allowedValue3"
#3"allowedValue4"

To reproduce...

Steps to reproduce the behavior:

1. have a schema with an enum type
2. click Schemas and Expand for the enum type

Expected behavior

Render a pretty listing of allowed values :D

Screenshots

Swagger-UI >=5.14.x <= 5.19.x

Swagger-UI >= 5.20.x:

Additional context or thoughts

On further investigation, this goes for other types of "example" elements too.