fix(css): Restore paragraph spacing in parameter descriptions and response descriptions by hkosova · Pull Request #10514 · swagger-api/swagger-ui · GitHub | Latest TMZ Celebrity News & Gossip | Watch TMZ Live
Skip to content

fix(css): Restore paragraph spacing in parameter descriptions and response descriptions #10514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(css): Restore paragraph spacing in parameter descriptions and response descriptions #10514

wants to merge 1 commit into from
+4 −4

Conversation

hkosova
Copy link
Contributor

@hkosova hkosova commented Jul 2, 2025

Recreated PR #10158 from a fresh branch.

Description

See the before/after screenshots. The issue was that multi-paragraph descriptions in parameters and responses had no space between the paragraphs. (But operation descriptions have proper paragraph spacing.)

I tracked down the issue to these rules:

swagger-ui/src/style/_table.scss

Lines 105 to 106 in d111183

p {
margin: 0;

swagger-ui/src/style/_table.scss

Lines 191 to 192 in d111183

p {
margin: 0;

which override the default spacing from:

swagger-ui/src/style/_markdown.scss

Lines 1 to 3 in d111183

.markdown, .renderedMarkdown {
p, pre {
margin: 1em auto;

The two abovementioned rules were added in #8214 to fix vertical misalignment of description text compared to other columns.

I think replacing a blanket margin: 0 with a more specific margin-top: 0 applicable only to the 1st paragraph of a block will both fix the paragraph spacing issue AND maintain the fix for #8214.

Motivation and Context

Improve readability of multi-paragraph descriptions.

How Has This Been Tested?

Tested manually by comparing the visual appearance in the online demo (petstore.swagger.io) and in the local build.

Screenshots (if appropriate):

Before After
Multi-paragraph parameter description before the fix Multi-paragraph parameter description after the fix
Multi-paragraph response description before the fix Multi-paragraph response description after the fix

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

@hkosova hkosova mentioned this pull request Jul 2, 2025
Closed
17 tasks
glowcloud
glowcloud requested changes Jul 4, 2025
View reviewed changes
Copy link
Contributor

@glowcloud glowcloud left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @hkosova,

Looks good, just one small change for the response description.

src/style/_table.scss
@@ -170,7 +170,7 @@ table {

.markdown,
.renderedMarkdown {
p {
p:first-child {
margin: 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The spacing between the description and response content will be a bit wider now, we should be able to fix that with:

p:last-child {
  margin-bottom: 0;
}

Before:
before

After:
after

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@glowcloud glowcloud glowcloud requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@hkosova @glowcloud

TMZ Celebrity News – Breaking Stories, Videos & Gossip

Looking for the latest TMZ celebrity news? You've come to the right place. From shocking Hollywood scandals to exclusive videos, TMZ delivers it all in real time.

Whether it’s a red carpet slip-up, a viral paparazzi moment, or a legal drama involving your favorite stars, TMZ news is always first to break the story. Stay in the loop with daily updates, insider tips, and jaw-dropping photos.

🎥 Watch TMZ Live

TMZ Live brings you daily celebrity news and interviews straight from the TMZ newsroom. Don’t miss a beat—watch now and see what’s trending in Hollywood.