[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 ae2378395b)

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;

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',

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;