Skip to content

fix(viewer): stop clipping eval results table and metric dropdown. - #324

Open
alex ngo (ango10) wants to merge 1 commit into
mainfrom
ango10/viewer-eval-results-table
Open

fix(viewer): stop clipping eval results table and metric dropdown.#324
alex ngo (ango10) wants to merge 1 commit into
mainfrom
ango10/viewer-eval-results-table

Conversation

@ango10

Copy link
Copy Markdown
Collaborator

Summary

Fixes the evaluation-results table on the suite page, where the right-hand columns were clipped rather than scrollable, and fixes the metric dropdown menus that the scroll-container fix then exposed as clipped.

Motivation / linked issue

Closes #322.

The Total column was unreachable on every suite. Not just long metric names, and not just narrow monitors. The page container is Primer's container-xl (max 1280px), so usable width is ~1198px regardless of screen size, while the table rendered at 1331px. The wrapper used overflow-hidden, so that 133px simply disappeared with no scrollbar to recover it.

Changes

  • overflow-hiddenoverflow-x-auto on the results-table wrapper, matching the pattern already used on the compare page. This is the safety net: no column can become unreachable again, whatever metrics a user selects.
  • Metric header labels now wrap inside a fixed 10rem column. These were the main width driver. The <th> was declared w-32, but PrimerDropdown's trigger is a fixed-height white-space: nowrap button, so w-32 could never bind — "Impermissible behavior violated" alone forced the column to 285px. Wrapping brings the table to 1198px, exactly inside the container, without shortening any metric name. labels.ts is shared with other surfaces and is deliberately untouched.
  • Capped the run-target cell so its existing truncate applies. The truncate class there was dead code: neither it nor min-w-0 can bind inside an auto-layout <td>, which grows to max-content, so the full target string rendered every time. A max-w on an inner block element makes the truncation and its title tooltip work as originally intended.
  • PrimerDropdown menus now render position: fixed, anchored to the trigger's viewport rect. Making the wrapper a scroll container exposed a second bug: an absolutely-positioned menu cannot escape an ancestor scroll context, so an open metric dropdown was cut off at 101px of overhang and its options were unreadable. It also inflated the wrapper's scrollWidth (1198 → 1300), producing a stray horizontal scrollbar whenever a menu was open. A fixed menu is neither clipped nor counted in an ancestor's scroll extent, so both symptoms resolve from one change.
  • Added the collision handling PrimerDropdown previously lacked: horizontal flip to right-aligned, vertical flip above the trigger, viewport clamping, and repositioning on scroll/resize while open.

Testing

  • npm run check: 0 errors (6 warnings, all pre-existing in routes/new/+page.svelte).
  • npm run build: passes.
  • Table layout, headless browser, 5 suites × 3 viewports (1280/1440/1680): 15/15 have no unreachable column. Negative control against the pre-fix code: 15/15 failed, with 23–227px of overflow.
  • Dropdowns, headless browser, 3 pages × 3 viewports: 15/15 render position: fixed, fully in-viewport, with unclipped option text. Negative control: all 15 were absolute before, 3 of them escaping the viewport entirely.
  • Confirmed the stray horizontal scrollbar no longer appears while a menu is open.

Checklist

  • Tests pass locally (pytest and/or viewer checks as applicable).
  • Docs updated if behavior or public API changed.
  • No secrets, credentials, or customer data committed.
  • No breaking change, or a CHANGELOG.md entry is included.

@ango10

alex ngo (ango10) commented Aug 19, 2026

Copy link
Copy Markdown
Collaborator Author

before: Image

after:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Viewer permissible_behavior_violated is cut off

1 participant