Repository navigation
fix(dashboard): stop the whitelabel delegates table clipping the Delegate button - #2169
Merged
Merged
Conversation
…gate button The Delegate column was 96px wide in a table-fixed layout, so the button with the gasless "Free" badge overflowed the table, got clipped by the container and produced a horizontal scroll. The column is now 160px, the whitelabel-only numeric columns give up a few points to the address, and the row actions (Copy + Details) only join the row while it is hovered instead of reserving ~130px of invisible space next to the name. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
brunod-e
requested review from
LeonardoVieira1630,
PedroBinotto and
alextnetto
as code owners
September 30, 2026 18:08
Collaborator
🎨 UI Review
Delegates table — row hover actions (applies to the main dashboard too)
Delegates table — column widths (whitelabel)
Mobile
Validated — no change needed
Generated by Claude Code |
pikonha
approved these changes
Sep 30, 2026
|
🚅 Deployed to the anticapture-pr-2169 environment in anticapture-infra
|
railway-app
Bot
temporarily deployed
to
anticapture-infra / anticapture-pr-2169
September 30, 2026 18:10
Destroyed
railway-app
Bot
temporarily deployed
to
anticapture-infra / anticapture-pr-2169
September 30, 2026 18:12
Destroyed
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c41e3dc9d1
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <div className="flex items-center opacity-0 transition-opacity [tr:hover_&]:opacity-100"> | ||
| // Only in the flow while hovered, so the invisible actions do | ||
| // not reserve ~130px next to the name on every row. | ||
| <div className="hidden items-center [tr:hover_&]:flex"> |
There was a problem hiding this comment.
For non-mobile layouts, hidden makes the Copy and Details controls display: none until a pointer hovers the row. The shared table renders rows as non-focusable <tr> elements with only an onClick handler, so keyboard users cannot trigger that hover state or tab to either control; in particular, copying a delegate address is no longer available to them. The previous opacity-0 implementation kept these buttons in the tab order.
Useful? React with 👍 / 👎.
Contributor
|
🔍 Vercel preview: https://anticapture-p2p8tujww-ful.vercel.app |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On the whitelabel stakeholders page (e.g.
ens.gov.blockful.io/stakeholders) the Delegates table cut the Delegate button and produced a horizontal scroll.Cause
The Delegate column was
w-24(96px) in atable-fixedlayout, but the button with the gasless Free badge is ~121px wide. The content overflowed the table, theoverflow-autocontainer clipped it at the rounded edge and the overflow created the horizontal scroll.Fix
w-40(160px), enough for both theDelegate + Freeand theDelegatedstates.Verification
Measured in headless Chrome (2x) at 1280, 1440, 1512 (MacBook Pro 14") and 1728 (MacBook Pro 16"): no horizontal scroll, Delegate button fully inside the table, no clipped address names at rest. At 1280 the longest ENS names get an ellipsis only while hovered. Typecheck, ESLint and Prettier pass on the dashboard.
🤖 Generated with Claude Code