diff --git a/src/components/molecules/Calendar/styles.ts b/src/components/molecules/Calendar/styles.ts index e57f95a6..4124a4c2 100644 --- a/src/components/molecules/Calendar/styles.ts +++ b/src/components/molecules/Calendar/styles.ts @@ -5,12 +5,18 @@ import * as Popover from '@radix-ui/react-popover' export const Container = styled(PopoverContent)` background-color: #fff; + position: absolute; + z-index: 99; border-radius: 0.5rem; padding: 1rem 2.5rem 0.5rem; - position: relative; max-width: 21rem; transition: none; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.1); + + @media screen and (max-width: 350px) { + max-width: 16rem; + padding: 1rem 2.5rem 0.5rem 1.8rem; + } ` export const CalendarActions = styled.div` diff --git a/src/components/molecules/FormRegister/FormRegisterFields/styles.ts b/src/components/molecules/FormRegister/FormRegisterFields/styles.ts index b2aaa9f6..5716c4de 100644 --- a/src/components/molecules/FormRegister/FormRegisterFields/styles.ts +++ b/src/components/molecules/FormRegister/FormRegisterFields/styles.ts @@ -22,7 +22,6 @@ export const DatePickerContainer = styled.label` display: flex; flex-direction: column; gap: 0.5rem; - font-size: 0.875rem; color: ${(props) => props.theme.colors.gray[700]}; diff --git a/src/components/molecules/FormRegister/style.ts b/src/components/molecules/FormRegister/style.ts index 2abe5299..462a0948 100644 --- a/src/components/molecules/FormRegister/style.ts +++ b/src/components/molecules/FormRegister/style.ts @@ -13,6 +13,16 @@ export const ContainerForm = styled.div` background: ${(props) => props.theme.colors.white}; border-radius: 12px; padding: 2rem; + + @media screen and (max-width: 600px) { + width: 80%; + top: 7rem; + } + @media screen and (max-width: 450px) { + width: 90%; + margin-right: -20px; + top: 4rem; + } ` export const ContainerRegister = styled.div` @@ -60,6 +70,7 @@ export const ContainerTerms = styled.div` export const TxtTerms = styled.label` font-size: 0.875rem; + text-align: start; width: 100%; color: ${(props) => props.theme.colors.blue[500]}; line-height: 150%;