mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-02-01 09:30:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix modal layout, make it larger on mobile

Browse Source
This commit is contained in:
MartinBraquet
2026-01-30 18:33:27 +01:00
parent f336e61304
commit e80d8d701a
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/answers/answer-compatibility-question-content.tsx
View File

@@ -156,8 +156,8 @@ export function AnswerCompatibilityQuestionContent(props: {
? shortenNumber(compatibilityQuestion.answer_count)
: null
return (
<Col className="h-full w-full gap-4">
<Col className="gap-1">
<Col className="h-[calc(100vh-120px)] sm:h-[calc(95vh-120px)] 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>*/}
{/* Massive upgrade coming soon! More prompts, better predictive power, filtered by category, etc.*/}
@@ -190,7 +190,7 @@ export function AnswerCompatibilityQuestionContent(props: {
<Col
className={clsx(
SCROLLABLE_MODAL_CLASS,
'h-[20rem] w-full gap-4 sm:h-[30rem]'
'w-full gap-4 flex-1 min-h-0'
)}
>
<Col className="gap-2">
@@ -238,7 +238,7 @@ export function AnswerCompatibilityQuestionContent(props: {
/>
</Col>
</Col>
<Row className="w-full justify-between gap-4">
<Row className="w-full justify-between gap-4 shrink-0">
{noSkip ? (
<div/>
) : (

10
web/components/layout/modal.tsx
View File

@@ -1,12 +1,12 @@
import { Dialog, Transition } from '@headlessui/react'
import { XIcon } from '@heroicons/react/outline'
import {Dialog, Transition} from '@headlessui/react'
import {XIcon} from '@heroicons/react/outline'
import clsx from 'clsx'
import { Fragment, ReactNode, useEffect, useRef } from 'react'
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 py-6 text-ink-1000'
'items-center gap-4 rounded-md bg-canvas-0 sm:px-8 px-4 pt-6 pb-2 text-ink-1000'
export const SCROLLABLE_MODAL_CLASS =
'max-h-[70vh] min-h-[20rem] !overflow-auto'
'!overflow-auto'
// From https://tailwindui.com/components/application-ui/overlays/modals
export function Modal(props: {