UX: fix button alignment on log-in required page (#11965)

app/assets/javascripts/discourse/app/controllers/static.js

@@ -1,13 +1,14 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
-import { equal } from "@ember/object/computed";
+import { equal, or } from "@ember/object/computed";
 import { userPath } from "discourse/lib/url";
 
 export default Controller.extend({
   application: controller(),
 
   showLoginButton: equal("model.path", "login"),
+  anyButtons: or("showLoginButton", "showSignupButton"),
 
   @discourseComputed("model.path")
   bodyClass: (path) => `static-${path}`,

app/assets/javascripts/discourse/app/templates/static.hbs

@@ -8,12 +8,16 @@
 
       {{plugin-outlet name="below-static" tagName=""}}
 
-      {{#if showSignupButton}}
-        {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}}
-      {{/if}}
+      {{#if anyButtons}}
+        <div class="body-page-button-container">
+          {{#if showSignupButton}}
+            {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}}
+          {{/if}}
 
-      {{#if showLoginButton}}
-        {{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}}
+          {{#if showLoginButton}}
+            {{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}}
+          {{/if}}
+        </div>
       {{/if}}
     </div>
   {{/watch-read}}

app/assets/stylesheets/common/base/faqs.scss

@@ -1,5 +1,5 @@
 .body-page {
-  /* intended only for /about /faq, /guidelines, /tos, and /privacy */
+  /* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
   width: 100%;
   max-width: 700px;
   .about-page & {
@@ -28,3 +28,10 @@
     margin-left: 40px;
   }
 }
+
+.body-page-button-container {
+  display: flex;
+  button {
+    margin-right: 0.75em;
+  }
+}