From e80d8d701a825b884c76e0863a1d2c0fdda40ea6 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 30 Jan 2026 18:33:27 +0100
Subject: [PATCH] Fix modal layout, make it larger on mobile

---
 .../answers/answer-compatibility-question-content.tsx  |  8 ++++----
 web/components/layout/modal.tsx                        | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index a07b52e..02739d7 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -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/>
         ) : (
diff --git a/web/components/layout/modal.tsx b/web/components/layout/modal.tsx
index 7ed6bcf..c1bf251 100644
--- a/web/components/layout/modal.tsx
+++ b/web/components/layout/modal.tsx
@@ -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: {