fix(compare): give the trend chart its own definite canvas height so the gap note can't squash it

The chart note (and the 2-row mobile chip legend) lived inside the fixed
360px/420px chartBox and competed with the canvas for it, so a longer
caption — e.g. the new KS4 gap note — shrank the mobile canvas to ~178px
and tripped the e2e >220px guard. The canvas now owns a definite height
(280px mobile / 380px desktop) with chips above and the note flowing
below at natural size, so neither can eat the plot. Verified on staging:
patched canvas renders 280px vs the squashed 178px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/Modal.module.css

@@ -123,13 +123,7 @@
   .modal {
     width: 100%;
     max-width: 100%;
-    /* Bottom sheet sized against the overlay (which tracks the visual
-       viewport), NOT vh: when the keyboard is open the overlay is short, so
-       max-height:100% keeps the whole sheet — input and results — above the
-       keyboard. min-height gives a comfortable default without a tiny stub,
-       but is capped at 100% so it never exceeds the visible area. */
-    min-height: min(55vh, 100%);
-    max-height: 100%;
+    max-height: 95vh;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     animation: slideUp 0.3s ease;

nextjs-app/components/Modal.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Modal.module.css';
 
@@ -18,8 +18,6 @@ interface ModalProps {
 }
 
 export function Modal({ isOpen, onClose, children, title, size = 'medium' }: ModalProps) {
-  const overlayRef = useRef<HTMLDivElement>(null);
-
   const handleEscape = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose();
@@ -41,32 +39,6 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
     };
   }, [isOpen, handleEscape]);
 
-  // Pin the overlay to the VISUAL viewport, not the layout viewport. On mobile
-  // the on-screen keyboard shrinks the visual viewport but not the layout one,
-  // so a `position: fixed; inset: 0` overlay keeps full height — leaving the
-  // bottom-anchored sheet (and the dim backdrop's lower half) hidden behind
-  // the keyboard. Tracking visualViewport.height/offsetTop keeps the whole
-  // overlay — backdrop and sheet — inside the visible area, above the keyboard.
-  useEffect(() => {
-    if (!isOpen) return;
-    const vv = typeof window !== 'undefined' ? window.visualViewport : null;
-    const el = overlayRef.current;
-    if (!vv || !el) return;
-
-    const sync = () => {
-      el.style.top = `${vv.offsetTop}px`;
-      el.style.height = `${vv.height}px`;
-      el.style.bottom = 'auto';
-    };
-    sync();
-    vv.addEventListener('resize', sync);
-    vv.addEventListener('scroll', sync);
-    return () => {
-      vv.removeEventListener('resize', sync);
-      vv.removeEventListener('scroll', sync);
-    };
-  }, [isOpen]);
-
   if (!isOpen || typeof window === 'undefined') return null;
 
   const handleOverlayClick = (e: React.MouseEvent) => {
@@ -76,7 +48,7 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
   };
 
   return createPortal(
-    <div ref={overlayRef} className={styles.overlay} onClick={handleOverlayClick}>
+    <div className={styles.overlay} onClick={handleOverlayClick}>
       <div className={`${styles.modal} ${styles[size]}`}>
         <div className={styles.header}>
           {title && <h2 className={styles.title}>{title}</h2>}

nextjs-app/components/SchoolSearchModal.module.css

@@ -2,6 +2,14 @@
   padding: 1.5rem;
 }
 
+.title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 1.5rem;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+}
+
 .warning {
   background: var(--accent-gold-bg);
   border: 1px solid var(--accent-gold, #c9a227);
@@ -111,16 +119,12 @@
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary, #1a1612);
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.resultButton {
-  flex: 0 0 auto;
-}
-
 .schoolMeta {
   display: flex;
   gap: 1rem;
@@ -155,30 +159,21 @@
     padding: 1rem;
   }
 
-  /* One scroll container on mobile: the modal content itself scrolls, so the
-     results list must not add its own inner scroll (double scrollbars, and
-     the input would be trapped above a short 400px window when the keyboard
-     shrinks the sheet). */
-  .results {
-    max-height: none;
-    overflow: visible;
+  .title {
+    font-size: 1.25rem;
   }
 
-  /* Compact stacked card: name + meta, then a full-width action so the tap
-     target is obvious and the card doesn't waste vertical space. */
   .resultItem {
     flex-direction: column;
     align-items: stretch;
-    gap: 0.625rem;
-    padding: 0.875rem;
   }
 
-  .resultButton {
+  .addButton {
     width: 100%;
   }
 
   .schoolMeta {
-    flex-wrap: wrap;
-    gap: 0.25rem 1rem;
+    flex-direction: column;
+    gap: 0.25rem;
   }
 }

nextjs-app/components/SchoolSearchModal.tsx

@@ -81,8 +81,10 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose} title="Add School to Comparison">
+    <Modal isOpen={isOpen} onClose={handleClose}>
       <div className={styles.modalContent}>
+        <h2 className={styles.title}>Add School to Comparison</h2>
+
         {!canAddMore && (
           <div className={styles.warning}>
             Maximum 5 schools can be compared. Remove a school to add another.
@@ -127,9 +129,9 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 <button
                   onClick={() => handleAddSchool(school)}
                   disabled={alreadySelected || !canAddMore}
-                  className={`${styles.resultButton} ${
+                  className={
                     alreadySelected ? "btn btn-active" : "btn btn-secondary"
-                  }`}
+                  }
                 >
                   {alreadySelected ? "✓ Comparing" : "+ Compare"}
                 </button>