From cad9e23e541c0e402f07449f8bb82f0969a8ccc2 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:31:11 +0200
Subject: [PATCH] Login page: Fix button width (#86680)

* Fix login buttons width

* Login page: Fix button width

* Add todo
---
 .../components/Login/LoginServiceButtons.tsx  | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index a2d67b05749..0bdcba60226 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -149,24 +149,27 @@ export const LoginServiceButtons = () => {
 
   if (hasServices) {
     return (
-      <Stack direction="column">
-        <LoginDivider />
-        {Object.entries(enabledServices).map(([key, service]) => {
-          const serviceName = service.name;
-          return (
-            <LinkButton
-              key={key}
-              className={getButtonStyleFor(service, styles, theme)}
-              href={`login/${service.hrefName ? service.hrefName : key}`}
-              target="_self"
-              fullWidth
-            >
-              <Icon className={styles.buttonIcon} name={service.icon} />
-              <Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans>
-            </LinkButton>
-          );
-        })}
-      </Stack>
+      // TODO: Remove extra div when Stack supports width
+      <div style={{ width: '100%' }}>
+        <Stack direction={'column'}>
+          <LoginDivider />
+          {Object.entries(enabledServices).map(([key, service]) => {
+            const serviceName = service.name;
+            return (
+              <LinkButton
+                key={key}
+                className={getButtonStyleFor(service, styles, theme)}
+                href={`login/${service.hrefName ? service.hrefName : key}`}
+                target="_self"
+                fullWidth
+              >
+                <Icon className={styles.buttonIcon} name={service.icon} />
+                <Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans>
+              </LinkButton>
+            );
+          })}
+        </Stack>
+      </div>
     );
   }