fix: scale selection label arrow for narrow labels by aidenybai · Pull Request #165 · aidenybai/react-grab

aidenybai · 2026-02-07T08:18:11Z

Summary

Scale the selection label arrow size proportionally to the inner panel width so it no longer overflows on short tag names like p
Extract arrow sizing into a shared getArrowSize utility used by both the Arrow component and label positioning logic
Use actual computed arrow height for label positioning to eliminate the gap between arrow and panel

Test plan

Hover over elements with short tag names (e.g. p, b, i) and verify the arrow fits within the label
Hover over elements with longer tag names (e.g. div, section) and verify the arrow remains the default size
Verify no gap between arrow and label panel in both above/below positions

Made with Cursor

Note

Low Risk
UI-only sizing/positioning changes scoped to the selection label arrow, with minimal blast radius and no data/security impact.

Overview
Fixes selection label arrows overflowing narrow labels by scaling the CSS triangle size dynamically via a shared getArrowSize utility.

SelectionLabel now measures the inner panel width and uses the computed arrow height for above/below positioning, while ArrowProps gains an optional labelWidth to drive the new sizing behavior.

^{Written by Cursor Bugbot for commit 7677809. This will update automatically on new commits. Configure here.}

Summary by cubic

Scaled the selection label arrow to fit narrow labels and used the real arrow height for positioning to remove the gap. Wide labels keep the default arrow size.

Bug Fixes
- Scales arrow via label width to prevent overflow on short tags (e.g., p, b, i).
- Uses computed arrow height for positioning to eliminate the panel gap.
- Clamps size between a minimum and the default to keep wide labels unchanged.
Refactors
- Added a shared getArrowSize utility used by the Arrow and positioning logic.
- Measured panel width and passed it to Arrow; extended ArrowProps with labelWidth.

^{Written for commit 7677809. Summary will update on new commits.}

The arrow (16px wide) overflowed labels with short tag names like "p". Arrow size now scales based on the inner panel width via a shared getArrowSize utility, and label positioning uses the actual arrow height to eliminate gaps. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel · 2026-02-07T08:18:13Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-website	Error		Feb 7, 2026 8:45am

pkg-pr-new · 2026-02-07T08:20:12Z

Open in StackBlitz

@react-grab/cli

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cli@165

grab

npm i https://pkg.pr.new/aidenybai/react-grab/grab@165

@react-grab/ami

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/ami@165

@react-grab/amp

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/amp@165

@react-grab/claude-code

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/claude-code@165

@react-grab/codex

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/codex@165

@react-grab/cursor

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cursor@165

@react-grab/droid

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/droid@165

@react-grab/gemini

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/gemini@165

@react-grab/opencode

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/opencode@165

react-grab

npm i https://pkg.pr.new/aidenybai/react-grab@165

@react-grab/relay

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/relay@165

@react-grab/utils

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/utils@165

commit: 7677809

pullfrog

Critical timing bug: Arrow renders before panelWidth is measured, causing scaling to fail on initial render.

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ pullfrog.com ｜ 𝕏}

pullfrog · 2026-02-07T08:20:13Z

packages/react-grab/src/components/selection-label/index.tsx

          position={arrowPosition()}
          leftPercent={computedPosition().arrowLeftPercent}
          leftOffsetPx={computedPosition().arrowLeftOffset}
+          labelWidth={panelWidth()}


Critical bug: The Arrow component renders before panelRef is assigned (line 405). When Arrow initially renders, panelWidth() returns 0, causing getArrowSize(0) to return the default ARROW_HEIGHT_PX (8px) instead of the scaled size.

The arrow will only get the correct size on subsequent re-renders after measureContainer runs. On first render with short labels, you'll still see the overflow issue that this PR aims to fix.

Solution: Move the Arrow after the panelRef div, or add a conditional render that waits for panelWidth() > 0.

pullfrog · 2026-02-07T08:20:13Z

packages/react-grab/src/components/selection-label/index.tsx

    const selectionBottom = bounds.y + bounds.height;
    const selectionTop = bounds.y;

+    const actualArrowHeight = getArrowSize(panelWidth());


This uses panelWidth() which is 0 during initial render. The positioning calculations will use the wrong arrow height (8px fallback) on first render, potentially causing the gap between arrow and panel that the PR description says it eliminates.

pullfrog · 2026-02-07T08:20:13Z

packages/react-grab/src/utils/get-arrow-size.ts

+  const scaledSize = labelWidth * ARROW_MAX_LABEL_WIDTH_RATIO;
+  return Math.max(ARROW_MIN_SIZE_PX, Math.min(ARROW_HEIGHT_PX, scaledSize));


For very narrow labels (15px wide), this produces 3px which gets clamped to 4px. Is 4px arrow still too large for the narrowest cases? The ratio and minimum should be validated against actual short tag names like p, b, i mentioned in the test plan.

pullfrog · 2026-02-07T08:20:13Z

packages/react-grab/src/constants.ts


 export const ARROW_HEIGHT_PX = 8;
+export const ARROW_MIN_SIZE_PX = 4;
+export const ARROW_MAX_LABEL_WIDTH_RATIO = 0.2;


The 20% ratio seems arbitrary. For a 30px label, arrow becomes 6px. Was this tested visually? Consider documenting the rationale.

pullfrog · 2026-02-07T08:20:41Z

Additional Finding: Context Menu Missing Same Fix

The context-menu.tsx component also renders an Arrow component (line 245-249) but wasn't updated to pass the labelWidth prop. This means:

Context menu arrows won't benefit from the same scaling logic
Context menus with short labels will have the same overflow issue this PR fixes for selection labels
The ArrowProps type now has an optional labelWidth field that context-menu doesn't provide

Recommendation: Apply the same pattern to context-menu.tsx:

Add a ref to track the menu panel width
Pass that width to the Arrow component
Use the same measurement timing approach

This would ensure consistent arrow sizing across both selection labels and context menus.

^{｜ Triggered by Pullfrog ｜ Using Claude Code ｜ View workflow run ｜ pullfrog.com ｜ 𝕏}

cubic-dev-ai

No issues found across 5 files

packages/react-grab/src/components/selection-label/index.tsx

…denybai#165) The arrow (16px wide) overflowed labels with short tag names like "p". Arrow size now scales based on the inner panel width via a shared getArrowSize utility, and label positioning uses the actual arrow height to eliminate gaps. Co-authored-by: Cursor <cursoragent@cursor.com>

pullfrog bot reviewed Feb 7, 2026

View reviewed changes

cubic-dev-ai bot reviewed Feb 7, 2026

View reviewed changes

vercel bot reviewed Feb 7, 2026

View reviewed changes

packages/react-grab/src/components/selection-label/index.tsx Show resolved Hide resolved

aidenybai merged commit d708441 into main Feb 7, 2026
13 of 14 checks passed

vercel bot had a problem deploying to Preview February 7, 2026 08:45 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: scale selection label arrow for narrow labels#165

fix: scale selection label arrow for narrow labels#165
aidenybai merged 1 commit intomainfrom
fix/arrow-size-narrow-labels

aidenybai commented Feb 7, 2026 •

edited by cubic-dev-ai bot

Loading

Uh oh!

vercel bot commented Feb 7, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 7, 2026

Uh oh!

pullfrog bot left a comment •

edited

Loading

Uh oh!

pullfrog bot Feb 7, 2026

Uh oh!

pullfrog bot Feb 7, 2026

Uh oh!

pullfrog bot Feb 7, 2026

Uh oh!

pullfrog bot Feb 7, 2026

Uh oh!

pullfrog bot commented Feb 7, 2026

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		const scaledSize = labelWidth * ARROW_MAX_LABEL_WIDTH_RATIO;
		return Math.max(ARROW_MIN_SIZE_PX, Math.min(ARROW_HEIGHT_PX, scaledSize));

Conversation

aidenybai commented Feb 7, 2026 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by cubic

Uh oh!

vercel bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Feb 7, 2026

Uh oh!

pullfrog bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot commented Feb 7, 2026

Additional Finding: Context Menu Missing Same Fix

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

aidenybai commented Feb 7, 2026 •

edited by cubic-dev-ai bot

Loading

vercel bot commented Feb 7, 2026 •

edited

Loading

pullfrog bot left a comment •

edited

Loading