fix error messages margin (#11508)

## Context
Fixing error messages margin in various places
Reset password
<img width="453" alt="Screenshot 2025-04-10 at 15 17 00"
src="https://github.com/user-attachments/assets/7a0fb090-4029-415f-8733-0c9e3aa3c3f2"
/>
Api key
<img width="543" alt="Screenshot 2025-04-10 at 15 16 21"
src="https://github.com/user-attachments/assets/d8f8a348-84d3-44d7-8cea-863c3ddb02fc"
/>

Also setting overflow on api key label in api keys table
<img width="580" alt="Screenshot 2025-04-10 at 15 16 15"
src="https://github.com/user-attachments/assets/207df981-c906-4926-a56d-38167628267f"
/>
This commit is contained in:
Weiko
2025-04-10 15:36:59 +02:00
committed by GitHub
parent b8d5f6d4b0
commit 63a165666a
6 changed files with 25 additions and 19 deletions

View File

@ -36,7 +36,7 @@ const validationSchema = z
passwordResetToken: z.string(),
newPassword: z
.string()
.regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
.regex(PASSWORD_REGEX, 'Password must be min. 8 characters'),
})
.required();
@ -71,6 +71,10 @@ const StyledInputContainer = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(3)};
`;
const StyledMainButton = styled(MainButton)`
margin-top: ${({ theme }) => theme.spacing(2)};
`;
export const PasswordReset = () => {
const { t } = useLingui();
const { enqueueSnackBar } = useSnackBar();
@ -237,7 +241,7 @@ export const PasswordReset = () => {
/>
</StyledFullWidthMotionDiv>
<MainButton
<StyledMainButton
variant="secondary"
title={t`Change Password`}
type="submit"

View File

@ -6,11 +6,11 @@ import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import styled from '@emotion/styled';
import { Trans, useLingui } from '@lingui/react/macro';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { Button } from 'twenty-ui/input';
import { H2Title, IconPlus } from 'twenty-ui/display';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledButtonContainer = styled.div`
display: flex;
@ -24,7 +24,7 @@ const StyledButtonContainer = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
overflow: hidden;
overflow: visible;
gap: ${({ theme }) => theme.spacing(2)};
`;