fix: fix color picker panel z-index issue (#47)

Co-authored-by: dev-redo <[email protected]>
corca-ai · Apr 23, 2024 · 1c0203a · 1c0203a
1 parent 7a68c0c
commit 1c0203a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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;
 `;