fix(styling): ensure authorize button stays on the right (#9387)

Refs #8940 Refs #9325
swagger-api · Nov 20, 2023 · 8f93354 · 8f93354
1 parent 3238718
commit 8f93354
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git 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 ? (
             <div className="scheme-container">
               <Col className="schemes wrapper" mobile={12}>
-                {hasServers ? <ServersContainer /> : null}
-                {hasSchemes ? <SchemesContainer /> : null}
+                {hasServers || hasSchemes ? (
+                  <div className="schemes-server-container">
+                    {hasServers ? <ServersContainer /> : null}
+                    {hasSchemes ? <SchemesContainer /> : null}
+                  </div>
+                ) : null}
                 {hasSecurityDefinitions ? <AuthorizeBtnContainer /> : null}
               </Col>
             </div>

diff --git 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