From 3354d196fb496705cd518e712454df3f13c8c21e Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 29 Jun 2023 16:37:27 +0100
Subject: [PATCH] [v10.0.x] Login: Fix footer from displaying under the login
 box (#70909)

Login: Fix footer from displaying under the login box (#70897)

(cherry picked from commit ae2378395b48d2ffc3941e592cacc9f19e268207)
---
 .../app/core/components/Branding/Branding.tsx |  2 +-
 .../app/core/components/Login/LoginLayout.tsx | 24 +++++++++++++------
 public/sass/components/_footer.scss           |  2 --
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index 474ad7f850a..3b1b302ce16 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -19,7 +19,7 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
   const background = css`
     &:before {
       content: '';
-      position: absolute;
+      position: fixed;
       left: 0;
       right: 0;
       bottom: 0;
diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx
index b4ca25ce50c..5468eed512b 100644
--- a/public/app/core/components/Login/LoginLayout.tsx
+++ b/public/app/core/components/Login/LoginLayout.tsx
@@ -35,15 +35,17 @@ export const LoginLayout = ({ children, branding }: React.PropsWithChildren<Logi
     <Branding.LoginBackground
       className={cx(loginStyles.container, startAnim && loginStyles.loginAnim, branding?.loginBackground)}
     >
-      <div className={cx(loginStyles.loginContent, loginBoxBackground, 'login-content-box')}>
-        <div className={loginStyles.loginLogoWrapper}>
-          <Branding.LoginLogo className={loginStyles.loginLogo} logo={loginLogo} />
-          <div className={loginStyles.titleWrapper}>
-            <h1 className={loginStyles.mainTitle}>{loginTitle}</h1>
-            {subTitle && <h3 className={loginStyles.subTitle}>{subTitle}</h3>}
+      <div className={loginStyles.loginMain}>
+        <div className={cx(loginStyles.loginContent, loginBoxBackground, 'login-content-box')}>
+          <div className={loginStyles.loginLogoWrapper}>
+            <Branding.LoginLogo className={loginStyles.loginLogo} logo={loginLogo} />
+            <div className={loginStyles.titleWrapper}>
+              <h1 className={loginStyles.mainTitle}>{loginTitle}</h1>
+              {subTitle && <h3 className={loginStyles.subTitle}>{subTitle}</h3>}
+            </div>
           </div>
+          <div className={loginStyles.loginOuterBox}>{children}</div>
         </div>
-        <div className={loginStyles.loginOuterBox}>{children}</div>
       </div>
       {branding?.hideFooter ? <></> : <Footer customLinks={branding?.footerLinks} />}
     </Branding.LoginBackground>
@@ -63,6 +65,14 @@ to{
 
 export const getLoginStyles = (theme: GrafanaTheme2) => {
   return {
+    loginMain: css({
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: '100%',
+    }),
     container: css({
       minHeight: '100%',
       backgroundPosition: 'center',
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 9300b277150..02ccb578f73 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -47,8 +47,6 @@
 .login-page {
   .footer {
     display: block;
-    bottom: $spacer;
-    position: absolute;
     padding: $space-md 0 $space-md 0;
     color: $text-color;