fix: relocate CSS container

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

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/components/calculators/Interactive/styles.ts b/components/calculators/Interactive/styles.ts
@@ -1,4 +1,5 @@
 "use client";
+import { token } from "@rubin-epo/epo-react-lib/styles";
 import styled from "styled-components";
 
 export const MathContainer = styled.div`
@@ -10,6 +11,14 @@ export const MathContainer = styled.div`
   gap: var(--math-gap);
   justify-items: left;
   min-width: 50%;
+
+  @container (min-width: ${token("BREAK_MOBILE_MIN")}) {
+    font-size: 125%;
+  }
+
+  @container (min-width: ${token("BREAK_TABLET_MIN")}) {
+    font-size: 150%;
+  }
 `;
 
 export const Inputs = styled.form`

diff --git a/components/calculators/interactive/styles.ts b/components/calculators/interactive/styles.ts
@@ -1,4 +1,5 @@
 "use client";
+import { token } from "@rubin-epo/epo-react-lib/styles";
 import styled from "styled-components";
 
 export const MathContainer = styled.div`
@@ -10,6 +11,14 @@ export const MathContainer = styled.div`
   gap: var(--math-gap);
   justify-items: left;
   min-width: 50%;
+
+  @container (min-width: ${token("BREAK_MOBILE_MIN")}) {
+    font-size: 125%;
+  }
+
+  @container (min-width: ${token("BREAK_TABLET_MIN")}) {
+    font-size: 150%;
+  }
 `;
 
 export const Inputs = styled.form`

diff --git a/components/questions/Calculator/index.tsx b/components/questions/Calculator/index.tsx
@@ -5,6 +5,7 @@ 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";
 
@@ -31,7 +32,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
   if (isNullish(equation)) return null;
 
   return (
-    <Styled.QuestionNumber {...{ id }}>
+    <QuestionNumber {...{ id }}>
       <label htmlFor={id}>{questionText}</label>
       <Styled.CalculatorWrapper>
         <InteractiveCalculator
@@ -43,7 +44,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
           }}
         />
       </Styled.CalculatorWrapper>
-    </Styled.QuestionNumber>
+    </QuestionNumber>
   );
 };
 

diff --git a/components/questions/Calculator/styles.ts b/components/questions/Calculator/styles.ts
@@ -1,23 +1,10 @@
 "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;
   justify-content: center;
   font-size: 100%;
   color: var(--neutral95, #1f2121);
-
-  @container (min-width: ${token("BREAK_MOBILE_MIN")}) {
-    font-size: 125%;
-  }
-
-  @container (min-width: ${token("BREAK_TABLET_MIN")}) {
-    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
@@ -15,7 +15,6 @@ const QuestionNumber: FunctionComponent<
 > = ({ id, direction = "block", className, children }) => {
   const questions = useQuestions();
 
-  const maxIndex = questions.byAll.length - 1;
   const questionIndex = questions.byAll.findIndex(
     (question) => question.id === id
   );
@@ -25,7 +24,6 @@ const QuestionNumber: FunctionComponent<
       value={questionIndex + 1}
       data-direction={direction}
       className={className}
-      style={{ "--z-index-dropdown-open": maxIndex - questionIndex }}
     >
       {children}
     </Styled.Number>