Skip to content

fix(style): fix authorize popup button overlap in Firefox#10804

Open
maruthang wants to merge 1 commit intoswagger-api:masterfrom
maruthang:fix/issue-6649-firefox-authorize-buttons
Open

fix(style): fix authorize popup button overlap in Firefox#10804
maruthang wants to merge 1 commit intoswagger-api:masterfrom
maruthang:fix/issue-6649-firefox-authorize-buttons

Conversation

@maruthang
Copy link
Copy Markdown

Description

Add display: flex to .authorize inside .auth-btn-wrapper to override the display: inline from the global .btn.authorize rule in _buttons.scss. Firefox does not automatically blockify inline elements inside flex containers (unlike Chrome), causing the Authorize and Close buttons in the authorization popup to overlap.

Motivation and Context

Fixes #6649

The Authorize popup dialog buttons overlap in Firefox because .btn.authorize sets display: inline, which Firefox doesn't auto-blockify inside the flex container .auth-btn-wrapper.

How Has This Been Tested?

  • Added a Cypress E2E regression test (test/e2e-cypress/e2e/bugs/6649.cy.js) that opens the authorize popup and verifies the Authorize and Close buttons do not horizontally overlap
  • Verified existing unit tests pass (829 tests, all passing)

Screenshots (if appropriate):

N/A — CSS-only fix, visual overlap issue in Firefox

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.

Add display: flex to .authorize inside .auth-btn-wrapper to override
the display: inline from the global .btn.authorize rule. Firefox does
not automatically blockify inline elements inside flex containers,
causing buttons to overlap.

Fixes swagger-api#6649
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SwaggerUIBundle: the buttons on Authorize pop-up window are overlapped in Firefox

1 participant