diff --git a/src/components/resolution/submit/ResolutionSubmitModal.tsx b/src/components/resolution/submit/ResolutionSubmitModal.tsx index 1cda8806b..09fc926ed 100644 --- a/src/components/resolution/submit/ResolutionSubmitModal.tsx +++ b/src/components/resolution/submit/ResolutionSubmitModal.tsx @@ -111,9 +111,12 @@ const ResolutionSubmitModal: FC = ({ profileImageUrl onClick={() => onClickTag(tag.value)} isSelected={selectedTag.includes(tag.value)} > - - {tag.icon} {tag.value} - + + {tag.icon + tag.value} + ))} @@ -181,7 +184,7 @@ const StyledForm = styled.form` display: flex; flex-direction: column; align-items: center; - padding: 0 20px; + padding: 0; width: 426px; overflow-y: scroll; @@ -226,10 +229,22 @@ const StyledTags = styled.section` flex-wrap: wrap; row-gap: 12px; column-gap: 10px; - justify-content: center; + justify-content: space-between; justify-items: center; margin-top: 12px; + padding: 0 20px; line-height: 22px; + + @media ${MOBILE_MEDIA_QUERY} { + column-gap: 0; + padding: 0 18.5px; + } +`; + +const StyledTagText = styled(Text)` + @media ${MOBILE_MEDIA_QUERY} { + font-size: 14px; + } `; const StyledTagItem = styled.label<{ isSelected: boolean }>` @@ -242,7 +257,7 @@ const StyledTagItem = styled.label<{ isSelected: boolean }>` border-radius: 20px; background-color: ${colors.gray800}; cursor: pointer; - padding: 6px 16px 6px 10px; + padding: 6px 14px; width: max-content; `; @@ -286,16 +301,13 @@ const TagTextWrapper = styled.div` const TagErrorWrapper = styled.div` display: flex; align-items: center; + padding-left: 20px; width: 100%; - height: 40px; + height: 32px; & > svg { margin-right: 6px; } - - @media ${MOBILE_MEDIA_QUERY} { - padding-left: 20px; - } `; const TagErrorMessage = styled(Text)`