Fix horizontal overflow on the behavioral responses page at 375px

src/components/theory/BehavioralResponses.tsx

@@ -42,7 +42,7 @@ export default function BehavioralResponses({ country = 'us' }: { country?: Coun
       </p>
 
       {/* Concepts + chart */}
-      <div className="tw:grid tw:grid-cols-2 tw:gap-8 tw:mb-12">
+      <div className="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-8 tw:mb-12">
         <div className="tw:flex tw:flex-col tw:gap-6">
           <div className="tw:p-6 tw:rounded-xl tw:border tw:border-[#E2E8F0] tw:bg-white">
             <h4 className="tw:text-lg tw:font-bold tw:text-pe-primary-800 tw:mb-2">
@@ -143,8 +143,10 @@ export default function BehavioralResponses({ country = 'us' }: { country?: Coun
         <h4 className="tw:text-base tw:font-semibold tw:text-black tw:mb-4">
           Substitution elasticity by income decile
         </h4>
-        <div className="tw:rounded-xl tw:border tw:border-[#E2E8F0] tw:overflow-x-auto tw:shadow-sm">
-          <table className="tw:w-full tw:min-w-[400px] tw:border-collapse tw:font-primary">
+        {/* contain: inline-size stops the table's min-content width from widening
+            <main> (and the page) on phones; anything wider scrolls here instead */}
+        <div className="tw:rounded-xl tw:border tw:border-[#E2E8F0] tw:overflow-x-auto tw:[contain:inline-size] tw:shadow-sm">
+          <table className="tw:w-full tw:border-collapse tw:font-primary">
             <thead>
               <tr>
                 {['Decile', 'Lower', 'Central', 'Upper'].map(col => (

src/test/behavioralMobileLayout.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import BehavioralResponses from '../components/theory/BehavioralResponses';
+
+// jsdom has no layout engine, so these guard the classes behind the 375px
+// layout measured in a browser. The table's 400px min-width made the page
+// 450px wide; once the page fits, a two-column grid would squeeze the chart
+// to 98px.
+describe('BehavioralResponses mobile layout', () => {
+  it('stacks the concepts and budget-constraint chart below md', () => {
+    render(<BehavioralResponses country="us" />);
+    const grid = screen.getByText('Budget constraint: baseline vs. reform').closest('.tw\\:grid');
+    expect(grid).not.toBeNull();
+    const classes = grid!.className.split(/\s+/);
+    expect(classes).toContain('tw:grid-cols-1');
+    expect(classes).toContain('tw:md:grid-cols-2');
+    expect(classes).not.toContain('tw:grid-cols-2');
+  });
+
+  it('fits the elasticity table to the viewport and contains any overflow', () => {
+    const { container } = render(<BehavioralResponses country="us" />);
+    const table = container.querySelector('table')!;
+    const tableClasses = table.className.split(/\s+/);
+    expect(tableClasses.filter((c) => c.startsWith('tw:min-w-') && c !== 'tw:min-w-0')).toEqual([]);
+    expect(table.style.minWidth).toBe('');
+    const classes = table.parentElement!.className.split(/\s+/);
+    expect(classes).toContain('tw:overflow-x-auto');
+    expect(classes).toContain('tw:[contain:inline-size]');
+  });
+});