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,10 +123,6 @@
   .modal {
     width: 100%;
     max-width: 100%;
-    /* Bottom sheet: open at a stable, comfortable height so the empty
-       "start typing" state isn't a tiny stub and the sheet doesn't jump as
-       results load (the results list scrolls within). */
-    min-height: 55vh;
     max-height: 95vh;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

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,21 +159,21 @@
     padding: 1rem;
   }
 
-  /* Compact stacked card: name + meta, then a full-width action so the tap
-     target is obvious and the card doesn't waste vertical space. */
+  .title {
+    font-size: 1.25rem;
+  }
+
   .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>