From 8f93354c818f64e830d5ebfc25ad0bb8c2e0db06 Mon Sep 17 00:00:00 2001
From: Ochuko Pedro <pedroogheneochuko@gmail.com>
Date: Mon, 20 Nov 2023 13:00:21 +0100
Subject: [PATCH] fix(styling): ensure authorize button stays on the right
 (#9387)

Refs #8940
Refs #9325
---
 src/core/components/layouts/base.jsx |  8 +++--
 src/style/_layout.scss               | 44 +++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 13 deletions(-)

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 ? (
             <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
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