fix(analytics): give charts real height and stop horizontal overflow

- Bump trend SVG to 320 viewBox height and use xMidYMid meet so the
  curves render at their true aspect ratio instead of getting squashed
- Constrain analytics-frame/row/panel children with min-width: 0 so
  long tables and SVGs no longer push the page off to the right
- Make daily-bars taller (200px) so the strip reads as a chart, not a
  thin sliver

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

app/admin/analytics/page.tsx

@@ -410,7 +410,7 @@ export default async function AnalyticsOverviewPage({
 
   // SVG geometry
   const CHART_W = 760;
-  const CHART_H = 220;
+  const CHART_H = 320;
   const maxAttemptsBucket = Math.max(1, ...trendBuckets.map((b) => b.attempts));
   const attemptsPath = buildLinePath(
     trendBuckets.map((b) => b.attempts),
@@ -562,7 +562,7 @@ export default async function AnalyticsOverviewPage({
             <div className="chart-wrap">
               <svg
                 viewBox={`0 0 ${CHART_W} ${CHART_H + 36}`}
-                preserveAspectRatio="none"
+                preserveAspectRatio="xMidYMid meet"
                 role="img"
                 aria-label="Weekly attempts and completions"
               >

app/globals.css

@@ -4849,6 +4849,14 @@ html.dark .theme-choice-button.active {
 .analytics-frame {
   display: grid;
   gap: 18px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+}
+
+.analytics-frame > * {
+  min-width: 0;
 }
 
 .analytics-metric-grid {
@@ -4868,6 +4876,10 @@ html.dark .theme-choice-button.active {
   align-items: start;
 }
 
+.analytics-row > * {
+  min-width: 0;
+}
+
 @media (max-width: 960px) {
   .analytics-row {
     grid-template-columns: minmax(0, 1fr);
@@ -4879,6 +4891,7 @@ html.dark .theme-choice-button.active {
   flex-direction: column;
   gap: 14px;
   padding-bottom: 20px;
+  min-width: 0;
 }
 
 .analytics-empty {
@@ -4891,6 +4904,7 @@ html.dark .theme-choice-button.active {
 .chart-legend {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   color: var(--color-muted);
   font-size: 0.78rem;
@@ -4934,18 +4948,21 @@ html.dark .theme-choice-button.active {
   flex-direction: column;
   gap: 12px;
   padding: 0 20px;
+  min-width: 0;
 }
 
 .chart-wrap svg {
+  display: block;
   width: 100%;
   height: auto;
-  max-height: 260px;
+  max-width: 100%;
 }
 
 .chart-summary {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 8px;
+  min-width: 0;
 }
 
 .chart-summary-cell {
@@ -4989,8 +5006,9 @@ html.dark .theme-choice-button.active {
   grid-template-columns: repeat(30, minmax(0, 1fr));
   align-items: end;
   gap: 3px;
-  height: 160px;
+  height: 200px;
   padding: 16px 20px 20px;
+  min-width: 0;
 }
 
 .daily-bar {