Login: Better auto sizing of login logo (#21645)

public/app/core/components/Branding/Branding.tsx

@@ -7,9 +7,13 @@ export interface BrandComponentProps {
 }
 
 export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
+  const maxSize = css`
+    max-width: 150px;
+  `;
+
   return (
     <>
-      <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />
+      <img className={cx(className, maxSize)} src="public/img/grafana_icon.svg" alt="Grafana" />
       <div className="logo-wordmark" />
     </>
   );

public/app/core/components/Login/LoginPage.tsx

@@ -15,7 +15,7 @@ export const LoginPage: FC = () => {
     <Branding.LoginBackground className="login container">
       <div className="login-content">
         <div className="login-branding">
-          <Branding.LoginLogo className="logo-icon" />
+          <Branding.LoginLogo className="login-logo" />
         </div>
         <LoginCtrl>
           {({

public/app/features/admin/LicenseChrome.tsx

@@ -57,7 +57,6 @@ export const LicenseChrome: React.FC<Props> = ({ header, editionNotice, subheade
           }}
         >
           <img
-            className="logo-icon"
             src="/public/img/grafana_icon.svg"
             alt="Grafana"
             width="80px"

public/sass/pages/_login.scss

@@ -115,12 +115,13 @@ select:-webkit-autofill:focus {
   align-items: center;
   justify-content: center;
   flex-grow: 0;
-  padding-top: $space-xl;
+  padding: $space-xl;
+}
 
-  .logo-icon {
-    width: 70px;
+.login-logo {
+  width: 100%;
+  max-width: 250px;
   margin-bottom: 15px;
-  }
 }
 
 .app-grafana {
@@ -285,10 +286,6 @@ select:-webkit-autofill:focus {
 @include media-breakpoint-up(sm) {
   .login-branding {
     padding: $space-md;
-
-    .logo-icon {
-      width: 80px;
-    }
   }
 }
 
@@ -309,10 +306,6 @@ select:-webkit-autofill:focus {
     padding: $space-xl;
     flex-grow: 1;
     border-right: 1px solid $login-border;
-
-    .logo-icon {
-      width: 130px;
-    }
   }
 
   .login-button-group {