feat(embed): handle heights of 400px

Author: rafaykhan-source

docs/embed.md

@@ -88,7 +88,7 @@ To discover the current set of valid hwKeys, visit `/inference` on the live site
 ## Embed mode behavior
 
 - Site header, footer, background decorations, and navigation are hidden on all `/embed/*` routes.
-- A small "SemiAnalysis InferenceX →" attribution link is shown at the bottom of each embed, deep-linking to the equivalent canonical dashboard URL.
+- A "SemiAnalysis InferenceX →" link appears in the chart caption (`Source: …`), deep-linking to the equivalent canonical dashboard URL.
 - `robots: noindex, nofollow` is set on all embed routes — they won't appear in search results.
 - An `embed_view` PostHog event is fired once on mount, capturing `referrer`, `embed_host`, `embed_chart`, `model`, `sequence`, `gpus`, `y_metric`, and `precisions`. This makes external embed traffic attributable in analytics.
 
@@ -118,3 +118,5 @@ All other routes set `frame-ancestors 'self'` and `X-Frame-Options: SAMEORIGIN`,
 `allow="clipboard-write"` is optional but needed if you want clipboard actions inside the embedded chart to work from the parent page.
 
 You can copy the same ready-made iframe snippet from the dashboard: open the chart's **Export** menu and choose **Copy embed**.
+
+For very short iframes (around 300–400 px tall), prefer `width` ≥ 1024 if you want the legend as a side column; below that width the legend uses a collapsible row at the bottom.

packages/app/cypress/e2e/embed-scatter.cy.ts

@@ -104,6 +104,21 @@ describe('Embed — Scatter Chart', () => {
       cy.get('[data-testid="embed-legend-panel"]').should('be.visible');
     });
 
+    it('legend dropdown stays inside the card at short height (800×400)', () => {
+      cy.viewport(800, 400);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-legend-panel"] summary').click();
+      cy.get('[data-testid="embed-legend-dropdown"]').should('be.visible');
+      cy.get('[data-testid="embed-scatter-figure"] [data-slot="card"]').then(($card) => {
+        cy.get('[data-testid="embed-legend-dropdown"]').then(($dd) => {
+          const cardTop = $card[0].getBoundingClientRect().top;
+          const ddTop = $dd[0].getBoundingClientRect().top;
+          expect(ddTop).to.be.at.least(cardTop);
+        });
+      });
+    });
+
     it('renders chart at 800×600', () => {
       cy.viewport(800, 600);
       cy.visit('/embed/scatter');

packages/app/src/app/embed/scatter/embed-scatter-client.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react';
 
 import EmbedScatterDisplay from '@/components/embed/embed-scatter-display';
-import { EmbedAttribution } from '@/components/embed/embed-attribution';
 import { GlobalFilterProvider } from '@/components/GlobalFilterContext';
 import { InferenceProvider } from '@/components/inference/InferenceContext';
 import { UnofficialRunProvider } from '@/components/unofficial-run-provider';
@@ -66,12 +65,9 @@ export default function EmbedScatterClient({ params, canonicalHref }: Props) {
     <UnofficialRunProvider>
       <GlobalFilterProvider>
         <InferenceProvider activeTab="inference">
-          <div className="flex h-screen min-h-0 flex-col gap-2 p-2 sm:p-4">
+          <div className="flex h-screen min-h-0 flex-col p-1 sm:p-2">
             <div className="min-h-0 flex-1">
-              <EmbedScatterDisplay chartType={params.chart} />
-            </div>
-            <div className="flex justify-end pt-1">
-              <EmbedAttribution canonicalHref={canonicalHref} />
+              <EmbedScatterDisplay chartType={params.chart} canonicalHref={canonicalHref} />
             </div>
           </div>
         </InferenceProvider>

packages/app/src/components/embed/embed-attribution.tsx

@@ -27,7 +27,8 @@ function getLgServerSnapshot() {
  * Below `lg`: a native `<details>` collapsible with a styled summary button.
  * Closed by default. When open, content is absolutely positioned above the
  * summary (`bottom-full`) so it overlays the chart instead of growing layout
- * height in fill-height embeds. Content scrolls inside `max-h-96`.
+ * height in fill-height embeds. Content scrolls inside a viewport-clamped max
+ * height so the panel never escapes a short iframe.
  *
  * Above `lg`: the `<details>` UI is skipped and the legend renders in a flex
  * column sized by the parent height container.
@@ -58,7 +59,10 @@ export function EmbedLegendWrapper({ children }: { children: React.ReactNode })
               className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
             />
           </summary>
-          <div className="absolute bottom-full left-0 right-0 z-40 mb-1 flex max-h-96 min-h-0 flex-col overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background shadow-lg">
+          <div
+            data-testid="embed-legend-dropdown"
+            className="absolute bottom-full left-0 right-0 z-40 mb-1 flex max-h-[min(24rem,calc(100dvh-6rem))] min-h-0 flex-col overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background shadow-lg"
+          >
             {children}
           </div>
         </details>

packages/app/src/components/embed/embed-legend-wrapper.tsx

@@ -2,14 +2,15 @@
 
 import { useCallback, useMemo } from 'react';
 
+import { EmbedLegendWrapper } from '@/components/embed/embed-legend-wrapper';
 import { useInference } from '@/components/inference/InferenceContext';
 import type { InferenceData, OverlayData } from '@/components/inference/types';
-import { processOverlayChartData } from '@/components/inference/utils';
 import ScatterGraph from '@/components/inference/ui/ScatterGraph';
-import { EmbedLegendWrapper } from '@/components/embed/embed-legend-wrapper';
+import { processOverlayChartData } from '@/components/inference/utils';
 import { Card } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
+import { track } from '@/lib/analytics';
 import {
   type Model,
   type Precision,
@@ -22,6 +23,8 @@ import {
 interface Props {
   /** Which chart to render — `e2e` or `interactivity`. Defaults to `e2e`. */
   chartType: 'e2e' | 'interactivity';
+  /** Canonical dashboard URL for the attribution link in the caption. */
+  canonicalHref: string;
 }
 
 /**
@@ -31,7 +34,7 @@ interface Props {
  * Reads from the same `InferenceContext` as the dashboard so chart behavior
  * (legend, zoom, overlay rendering) stays consistent.
  */
-export default function EmbedScatterDisplay({ chartType }: Props) {
+export default function EmbedScatterDisplay({ chartType, canonicalHref }: Props) {
   const {
     graphs,
     loading,
@@ -120,7 +123,7 @@ export default function EmbedScatterDisplay({ chartType }: Props) {
 
   if (isFirstLoad || !targetGraph) {
     return (
-      <Card data-testid="embed-scatter-skeleton">
+      <Card data-testid="embed-scatter-skeleton" className="border-0 p-2 md:p-3">
         <Skeleton className="h-7 w-2/4 mb-1" />
         <Skeleton className="h-5 w-3/4 mb-2" />
         <Skeleton className="h-[420px] w-full" />
@@ -149,7 +152,18 @@ export default function EmbedScatterDisplay({ chartType }: Props) {
       <p className="text-sm text-muted-foreground mb-2">
         {getModelLabel(targetGraph.model as Model)} •{' '}
         {selectedPrecisions.map((prec) => getPrecisionLabel(prec as Precision)).join(', ')} •{' '}
-        {getSequenceLabel(targetGraph.sequence as Sequence)} • Source: SemiAnalysis InferenceX™
+        {getSequenceLabel(targetGraph.sequence as Sequence)} • Source:{' '}
+        <a
+          data-testid="embed-attribution"
+          href={canonicalHref}
+          target="_blank"
+          rel="noopener"
+          onClick={() => track('embed_attribution_clicked', { href: canonicalHref })}
+          className="inline-flex items-center gap-1 text-foreground underline-offset-2 hover:underline"
+        >
+          SemiAnalysis InferenceX
+          <span aria-hidden>→</span>
+        </a>
       </p>
     </>
   );
@@ -164,7 +178,7 @@ export default function EmbedScatterDisplay({ chartType }: Props) {
       data-testid="embed-scatter-figure"
       className="relative flex h-full min-h-0 flex-col rounded-lg"
     >
-      <Card className="flex h-full min-h-0 flex-col">
+      <Card className="flex h-full min-h-0 flex-col border-0 p-2 md:p-3">
         <ScatterGraph
           chartId="embed-chart"
           modelLabel={targetGraph.model}