From 6d25937b563adf1f3ad9ed0eeedbd7402cc8b2ef Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Fri, 30 Jan 2026 23:40:45 +0100 Subject: [PATCH] Apply modal height to all modals --- .../answers/add-compatibility-question-button.tsx | 14 +++++++------- .../answer-compatibility-question-button.tsx | 5 +++-- .../answer-compatibility-question-content.tsx | 2 +- web/components/layout/modal.tsx | 2 +- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/web/components/answers/add-compatibility-question-button.tsx b/web/components/answers/add-compatibility-question-button.tsx index f0ae3c3..3b8ac6e 100644 --- a/web/components/answers/add-compatibility-question-button.tsx +++ b/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 | 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(['', '']) @@ -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)} > - + )} ))} diff --git a/web/components/answers/answer-compatibility-question-button.tsx b/web/components/answers/answer-compatibility-question-button.tsx index 044b095..578b369 100644 --- a/web/components/answers/answer-compatibility-question-button.tsx +++ b/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 ( - +

{t('compatibility.onboarding.title', 'See who you\'ll actually align with')}

diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx index 0da499f..fd3e1df 100644 --- a/web/components/answers/answer-compatibility-question-content.tsx +++ b/web/components/answers/answer-compatibility-question-content.tsx @@ -156,7 +156,7 @@ export function AnswerCompatibilityQuestionContent(props: { ? shortenNumber(compatibilityQuestion.answer_count) : null return ( - + {/*{compatibilityQuestion.importance_score > 0 && */} {/* */} diff --git a/web/components/layout/modal.tsx b/web/components/layout/modal.tsx index 6e2812a..4414b87 100644 --- a/web/components/layout/modal.tsx +++ b/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'