Login page: Fix button width (#86680)

* Fix login buttons width

* Login page: Fix button width

* Add todo
This commit is contained in:
Alex Khomenko 2024-04-22 14:31:11 +02:00 committed by GitHub
parent 7caa30bc2e
commit cad9e23e54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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