diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx index 45ab3f4..31aab92 100644 --- a/src/components/ColorPicker/index.tsx +++ b/src/components/ColorPicker/index.tsx @@ -24,6 +24,7 @@ const Base = styled.div` box-shadow: 0px 0px 1px 0px rgba(132, 132, 132, 0.31), 0px 2px 5px 0px rgba(70, 70, 70, 0.2); + z-index: 1; .react-colorful { width: 100%; diff --git a/src/components/Input/InputContainer.tsx b/src/components/Input/InputContainer.tsx index f9bc02c..7d9e860 100644 --- a/src/components/Input/InputContainer.tsx +++ b/src/components/Input/InputContainer.tsx @@ -204,18 +204,18 @@ const InputChildrenWrapper = styled.div` position: relative; `; -const RightSectionWrapper = styled.div` +const SectionWrapper = styled.div` position: absolute; - display: flex; - top: 50%; - transform: translateY(-50%); + height: fit-content; + top: 0; + bottom: 0; + margin: auto; +`; + +const RightSectionWrapper = styled(SectionWrapper)` right: 8px; `; -const LeftSectionWrapper = styled.div` - position: absolute; - display: flex; - top: 50%; - transform: translateY(-50%); +const LeftSectionWrapper = styled(SectionWrapper)` padding-left: 10px; `;