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

Refs #8940 
Refs #9325

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 || hasSchemes ? (
+                  <div className="schemes-server-container">
                     {hasServers ? <ServersContainer /> : null}
                     {hasSchemes ? <SchemesContainer /> : null}
+                  </div>
+                ) : null}
                 {hasSecurityDefinitions ? <AuthorizeBtnContainer /> : null}
               </Col>
             </div>

src/style/_layout.scss

@@ -795,6 +795,18 @@
 
         gap: 10px;
 
+        /*
+        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
+        {
+            display: flex;
+            flex-wrap: wrap;
+
+            gap: 10px;
+
             > label
             {
                 font-size: 12px;
@@ -814,6 +826,16 @@
                     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