swagger-api / swagger-api/swagger-ui

CSS related operationId name is breaking line

Open
#10,071 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

It was detected on versions 6.6.1 and 6.6.2 that operationId name is now presented breaking the line as you can see in the screenshot below. The version 6.5.0 is working fine, I did a Ctrl+F5 after downgrading to refresh the CSS and it works.

image

Expected behavior
Do not break line of have space to display operationId on the right.

Actual behavior
The operationId name is breaking into the next line.

Steps to reproduce

// add customOperationIds with AddSwaggerGen

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(options =>
options.CustomOperationIds(selector =>
{
var httpVerb = selector.HttpMethod?.ToSentenceCase();
var controllerName = ((ControllerActionDescriptor)selector.ActionDescriptor).ControllerName;
var actionSuffix = GetActionSuffix(selector);
return $"{httpVerb}{controllerName}{actionSuffix}";
})
);

Swashbuckle.AspNetCore version
6.6.2

.NET Version
8.0.202

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the layout issue in Swagger UI using the provided custom operationId example, comparing versions 6.5.0 and 6.6.2. Inspect the frontend styling and rendering around operationId names; done when the name remains on one line or has sufficient space beside the operation details.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.