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,6 +8,8 @@
 
       {{plugin-outlet name="below-static" tagName=""}}
 
+      {{#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}}
@@ -16,5 +18,7 @@
             {{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}}
           {{/if}}
         </div>
+      {{/if}}
+    </div>
   {{/watch-read}}
 {{/d-section}}

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;
+  }
+}