fix: dropdowns behind questions

lsst-epo · Jun 13, 2024 · c96bc00 · c96bc00
1 parent ae1e55a
commit c96bc00
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/components/content-blocks/Questions/styles.ts b/components/content-blocks/Questions/styles.ts
@@ -13,7 +13,6 @@ export const QuestionList = styled.ol`
 
   background-color: var(--list-background-color, transparent);
   color: var(--question-color);
-  isolation: isolate;
   list-style-type: decimal;
   list-style-position: inside;
   padding: var(--list-padding, 0);

diff --git a/components/questions/Calculator/index.tsx b/components/questions/Calculator/index.tsx
@@ -5,7 +5,6 @@ import useAnswer from "@/hooks/useAnswer";
 import { isNullish } from "@/lib/utils";
 import { WidgetInput } from "@/types/answers";
 import InteractiveCalculator from "@/components/calculators/Interactive";
-import QuestionNumber from "../QuestionNumber";
 import * as Styled from "./styles";
 import { Equation } from "@/types/calculators";
 
@@ -32,7 +31,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
   if (isNullish(equation)) return null;
 
   return (
-    <QuestionNumber {...{ id }}>
+    <Styled.QuestionNumber {...{ id }}>
       <label htmlFor={id}>{questionText}</label>
       <Styled.CalculatorWrapper>
         <InteractiveCalculator
@@ -44,7 +43,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
           }}
         />
       </Styled.CalculatorWrapper>
-    </QuestionNumber>
+    </Styled.QuestionNumber>
   );
 };
 

diff --git a/components/questions/Calculator/styles.ts b/components/questions/Calculator/styles.ts
@@ -1,6 +1,7 @@
 "use client";
 import styled from "styled-components";
 import { token } from "@rubin-epo/epo-react-lib/styles";
+import BaseQuestionNumber from "../QuestionNumber";
 
 export const CalculatorWrapper = styled.div`
   display: flex;
@@ -16,3 +17,7 @@ export const CalculatorWrapper = styled.div`
     font-size: 150%;
   }
 `;
+
+export const QuestionNumber = styled(BaseQuestionNumber)`
+  container-type: inline-size;
+`;
diff --git a/components/questions/QuestionNumber/index.tsx b/components/questions/QuestionNumber/index.tsx
@@ -25,7 +25,7 @@ const QuestionNumber: FunctionComponent<
       value={questionIndex + 1}
       data-direction={direction}
       className={className}
-      style={{ zIndex: maxIndex - questionIndex }}
+      style={{ "--z-index-dropdown-open": maxIndex - questionIndex }}
     >
       {children}
     </Styled.Number>

diff --git a/components/questions/QuestionNumber/styles.ts b/components/questions/QuestionNumber/styles.ts
@@ -2,9 +2,6 @@
 import styled from "styled-components";
 
 export const Number = styled.li`
-  container-type: inline-size;
-  position: relative;
-
   &[data-direction="block"] {
     & > * + * {
       margin-block-start: var(--PADDING_SMALL, 20px);