fix: fix dropdown css

SWM-FIRE · Jun 2, 2024 · ebcdd99 · ebcdd99
1 parent db28e94
commit ebcdd99
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 31 deletions.
diff --git a/src/components/main/createRoomModal/Theme.tsx b/src/components/main/createRoomModal/Theme.tsx
@@ -39,18 +39,20 @@ export default function Theme({ onClickTheme }) {
         </SelectIcon>
       </SelectButton>
       {isDropDown && (
-        <DropDown data-cy="create-room-modal-theme-dropdown">
-          {themeJson.map((theme) => (
-            <Option
-              value={theme.value}
-              key={theme.value}
-              onClick={onClickOption}
-              type="button"
-            >
-              {theme.name}
-            </Option>
-          ))}
-        </DropDown>
+        <DropDownPosition>
+          <DropDown data-cy="create-room-modal-theme-dropdown">
+            {themeJson.map((theme) => (
+              <Option
+                value={theme.value}
+                key={theme.value}
+                onClick={onClickOption}
+                type="button"
+              >
+                {theme.name}
+              </Option>
+            ))}
+          </DropDown>
+        </DropDownPosition>
       )}
       {error && <Error />}
     </Component>
@@ -99,16 +101,21 @@ const SelectIcon = styled.div`
   width: 5%;
 `;
 
-const DropDown = styled.div`
+const DropDownPosition = styled.div`
   position: absolute;
+  top: 8.4rem;
+  left: 0;
   width: 100%;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+const DropDown = styled.div`
   background-color: #191f28;
   border-radius: 0.6rem;
-  top: 8.9rem;
-  z-index: 2;
   @keyframes dropdown {
     0% {
-      transform: translateY(-5%);
+      transform: translateY(-100%);
     }
     100% {
       transform: translateY(0);

diff --git a/src/components/main/createRoomModal/Total.tsx b/src/components/main/createRoomModal/Total.tsx
@@ -40,17 +40,19 @@ export default function Total({ total, onClickTotal }) {
         </SelectIcon>
       </SelectButton>
       {isDropDown && (
-        <DropDown data-cy="create-room-modal-total-dropdown">
-          <Option onClick={onClickOption} type="button">
-            2
-          </Option>
-          <Option onClick={onClickOption} type="button">
-            3
-          </Option>
-          <Option onClick={onClickOption} type="button">
-            4
-          </Option>
-        </DropDown>
+        <DropDownPosition>
+          <DropDown data-cy="create-room-modal-total-dropdown">
+            <Option onClick={onClickOption} type="button">
+              2
+            </Option>
+            <Option onClick={onClickOption} type="button">
+              3
+            </Option>
+            <Option onClick={onClickOption} type="button">
+              4
+            </Option>
+          </DropDown>
+        </DropDownPosition>
       )}
       {error && <Error />}
     </Component>
@@ -99,16 +101,21 @@ const SelectIcon = styled.div`
   width: 5%;
 `;
 
-const DropDown = styled.div`
+const DropDownPosition = styled.div`
   position: absolute;
+  top: 8.4rem;
+  left: 0;
   width: 100%;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+const DropDown = styled.div`
   background-color: #191f28;
   border-radius: 0.6rem;
-  top: 8.9rem;
-  z-index: 2;
   @keyframes dropdown {
     0% {
-      transform: translateY(-5%);
+      transform: translateY(-100%);
     }
     100% {
       transform: translateY(0);