diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 8208b6a4add..efd61551c36 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -112,8 +112,12 @@ export default class BaseLayout extends React.Component {
{hasServers || hasSchemes || hasSecurityDefinitions ? (
- {hasServers ?
: null}
- {hasSchemes ?
: null}
+ {hasServers || hasSchemes ? (
+
+ {hasServers ? : null}
+ {hasSchemes ? : null}
+
+ ) : null}
{hasSecurityDefinitions ?
: null}
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index d28aa96dadb..fb603382975 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -795,26 +795,48 @@
gap: 10px;
- > label
+ /*
+ This wraps the servers or schemes selector.
+ This was added to make sure the Authorize button is always on the right
+ and the servers or schemes selector is always on the left.
+ */
+ > .schemes-server-container
{
- font-size: 12px;
- font-weight: bold;
-
display: flex;
- flex-direction: column;
+ flex-wrap: wrap;
- margin: -20px 15px 0 0;
+ gap: 10px;
- @include text_headline();
-
- select
+ > label
{
- min-width: 130px;
+ font-size: 12px;
+ font-weight: bold;
+
+ display: flex;
+ flex-direction: column;
- text-transform: uppercase;
+ margin: -20px 15px 0 0;
+
+ @include text_headline();
+
+ select
+ {
+ min-width: 130px;
+
+ text-transform: uppercase;
+ }
}
}
+ /*
+ This checks if the schemes-server-container is not present and
+ aligns the authorize button to the right
+ */
+ &:not(:has(.schemes-server-container))
+ {
+ justify-content: flex-end;
+ }
+
/*
Target Authorize Button in schemes wrapper
This was added here to fix responsiveness issues with the authorize button