From 3a5b979e5c8da7976dff4c02ce18258a6e573c6d Mon Sep 17 00:00:00 2001
From: Elife <elife@localhost>
Date: Tue, 25 Aug 2026 14:40:12 +0500
Subject: [PATCH] Fix horizontal overflow on public Test pages at narrow
 viewports

Two independent overflow sources on /tests/[slug] at ~390px:

1. Prompt/system-prompt/settings render in <pre> blocks inside
   .context-grid with default white-space:pre and grid items defaulting
   to min-width:auto, so one long unbroken line pins the grid (and the
   whole page) to that line's width. Add min-width:0 to the grid cards
   and pre-wrap/overflow-wrap to the pre, matching the existing
   .run-evidence/.transcript-panel pre patterns.

2. .artifact-image combines min-height:280px with aspect-ratio:16/10,
   forcing a 448px minimum width below ~472px viewport. Add a
   min-height:0 override inside a max-width:640px media query placed
   after the base rule so it wins the cascade (media queries add no
   specificity).

Also guard .showcase-hero > div and .showcase-spec rows (long model
names/versions) with min-width:0 and overflow-wrap:anywhere.

Verified at a true 390px viewport (Chrome CDP device-metrics override,
pageWidth = documentElement.scrollWidth): before 1013px overflow,
after 390px no overflow. Independent confirmations: 770->375,
698->390, 2603->390 across three separate harnesses.
---
 app/globals.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index 1308451..b2b9c8e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1518,6 +1518,31 @@ summary:focus-visible {
   background: var(--panel);
 }
 
+/* Test-detail pages: contain long contributor content so it cannot
+   force a horizontal scroll on narrow (390px) screens. */
+.context-grid > article,
+.showcase-hero > div,
+.showcase-spec {
+  min-width: 0;
+}
+
+.context-grid > article > pre {
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.showcase-spec div {
+  min-width: 0;
+}
+
+.showcase-spec strong,
+.showcase-spec small {
+  overflow-wrap: anywhere;
+}
+
 .upload-wizard {
   display: grid;
   grid-template-columns: 210px minmax(0, 1fr);
@@ -2742,6 +2767,16 @@ summary:focus-visible {
   aspect-ratio: 16 / 10;
 }
 
+/* Below ~472px viewport the 16/10 ratio combined with the 280px height
+   floor would force a 448px-wide box and side-scroll the page; drop the
+   floor so the image scales with the column. This override must live
+   after the base rule above — same specificity, later declaration wins. */
+@media (max-width: 640px) {
+  .artifact-image {
+    min-height: 0;
+  }
+}
+
 .artifact-image img {
   object-fit: contain;
 }