Apply modal height to all modals

web/components/answers/add-compatibility-question-button.tsx

@@ -22,7 +22,7 @@ import {useT} from 'web/lib/locale'
 export function AddCompatibilityQuestionButton(props: {
   refreshCompatibilityAll: () => void
 }) {
-  const { refreshCompatibilityAll } = props
+  const {refreshCompatibilityAll} = props
   const [open, setOpen] = useState(false)
   const t = useT()
   const user = useUser()
@@ -54,7 +54,7 @@ function AddCompatibilityQuestionModal(props: {
   user: User
   onClose?: () => void
 }) {
-  const { open, setOpen, user, onClose } = props
+  const {open, setOpen, user, onClose} = props
   const [dbQuestion, setDbQuestion] = useState<rowFor<'compatibility_prompts'> | null>(
     null
   )
@@ -95,7 +95,7 @@ function CreateCompatibilityModalContent(props: {
   afterAddQuestion: (question: rowFor<'compatibility_prompts'>) => void
   setOpen: (open: boolean) => void
 }) {
-  const { afterAddQuestion, setOpen } = props
+  const {afterAddQuestion, setOpen} = props
   const t = useT()
   const [question, setQuestion] = useState('')
   const [options, setOptions] = useState<string[]>(['', ''])
@@ -124,7 +124,7 @@ function CreateCompatibilityModalContent(props: {
   const noRepeatOptions = uniq(options).length == options.length
 
   const generateJson = () => {
-     // Note the change in the generic type
+    // Note the change in the generic type
     return options.reduce((obj, item, index) => {
       if (item.trim() !== '') {
         obj[item] = index // Mapping each option to its index
@@ -176,7 +176,7 @@ function CreateCompatibilityModalContent(props: {
                 value={options[index]}
                 onChange={(e) => onOptionChange(index, e.target.value)}
                 className="w-full"
-                placeholder={t('answers.add.option_placeholder', 'Option {n}', { n: String(index + 1) })}
+                placeholder={t('answers.add.option_placeholder', 'Option {n}', {n: String(index + 1)})}
                 rows={1}
                 maxLength={MAX_ANSWER_LENGTH}
               />
@@ -185,14 +185,14 @@ function CreateCompatibilityModalContent(props: {
                   className="bg-ink-400 text-ink-0 hover:bg-ink-600 transition-color absolute -right-1.5 -top-1.5 rounded-full p-0.5"
                   onClick={() => deleteOption(index)}
                 >
-                  <XIcon className="z-10 h-3 w-3" />
+                  <XIcon className="z-10 h-3 w-3"/>
                 </button>
               )}
             </div>
           ))}
           <Button onClick={addOption} color="gray-outline">
             <Row className="items-center gap-1">
-              <PlusIcon className="h-4 w-4" />
+              <PlusIcon className="h-4 w-4"/>
               {t('answers.add.add_option', 'Add Option')}
             </Row>
           </Button>

web/components/answers/answer-compatibility-question-button.tsx

@@ -3,11 +3,12 @@ import {QuestionWithCountType} from 'web/hooks/use-questions'
 import {useState} from 'react'
 import {Button} from 'web/components/buttons/button'
 import {Col} from 'web/components/layout/col'
-import {Modal, MODAL_CLASS} from 'web/components/layout/modal'
+import {Modal, MODAL_CLASS, SCROLLABLE_MODAL_CLASS} from 'web/components/layout/modal'
 import {AnswerCompatibilityQuestionContent} from './answer-compatibility-question-content'
 import router from "next/router";
 import Link from "next/link";
 import {useT} from 'web/lib/locale'
+import clsx from "clsx";
 
 export function AnswerCompatibilityQuestionButton(props: {
   user: User | null | undefined
@@ -105,7 +106,7 @@ function CompatibilityOnboardingScreen({onNext, onSkip}: { onNext: () => void; o
   const t = useT()
 
   return (
-    <Col className="max-w-2xl mx-auto text-center px-6 py-12">
+    <Col className={clsx(SCROLLABLE_MODAL_CLASS, "max-w-2xl mx-auto text-center px-6")}>
       <h1 className="text-4xl font-bold text-ink-900 mb-6">
         {t('compatibility.onboarding.title', 'See who you\'ll actually align with')}
       </h1>

web/components/answers/answer-compatibility-question-content.tsx

@@ -156,7 +156,7 @@ export function AnswerCompatibilityQuestionContent(props: {
     ? shortenNumber(compatibilityQuestion.answer_count)
     : null
   return (
-    <Col className="h-[calc(100dvh-var(--hloss)-120px)] sm:h-[calc(95dvh-var(--hloss)-120px)] min-h-0 w-full gap-4">
+    <Col className="min-h-0 w-full gap-4">
       <Col className="gap-1 shrink-0">
         {/*{compatibilityQuestion.importance_score > 0 && <Row className="text-blue-400 -mt-4 w-full justify-start text-sm">*/}
         {/*  <span>*/}

web/components/layout/modal.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import {Fragment, ReactNode, useEffect, useRef} from 'react'
 
 export const MODAL_CLASS =
-  'items-center gap-4 rounded-md bg-canvas-0 sm:px-8 px-4 pt-6 pb-2 text-ink-1000'
+  'items-center gap-4 rounded-md bg-canvas-0 sm:px-8 px-4 pt-6 pb-2 text-ink-1000 h-[calc(100dvh-var(--hloss)-120px)] sm:h-[calc(95dvh-var(--hloss)-120px)] '
 export const SCROLLABLE_MODAL_CLASS =
   '!overflow-auto'