fix: scale selection label arrow proportionally for narrow labels (aidenybai#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>

Author: aidenybai

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

@@ -1,9 +1,11 @@
 import type { Component } from "solid-js";
 import type { ArrowProps } from "../../types.js";
+import { getArrowSize } from "../../utils/get-arrow-size.js";
 
 export const Arrow: Component<ArrowProps> = (props) => {
   const arrowColor = () => props.color ?? "white";
   const isBottom = () => props.position === "bottom";
+  const arrowSize = () => getArrowSize(props.labelWidth ?? 0);
 
   return (
     <div
@@ -16,10 +18,14 @@ export const Arrow: Component<ArrowProps> = (props) => {
         transform: isBottom()
           ? "translateX(-50%) translateY(-100%)"
           : "translateX(-50%) translateY(100%)",
-        "border-left": "8px solid transparent",
-        "border-right": "8px solid transparent",
-        "border-bottom": isBottom() ? `8px solid ${arrowColor()}` : undefined,
-        "border-top": isBottom() ? undefined : `8px solid ${arrowColor()}`,
+        "border-left": `${arrowSize()}px solid transparent`,
+        "border-right": `${arrowSize()}px solid transparent`,
+        "border-bottom": isBottom()
+          ? `${arrowSize()}px solid ${arrowColor()}`
+          : undefined,
+        "border-top": isBottom()
+          ? undefined
+          : `${arrowSize()}px solid ${arrowColor()}`,
         filter: isBottom()
           ? "drop-shadow(-1px -1px 0 rgba(0,0,0,0.06)) drop-shadow(1px -1px 0 rgba(0,0,0,0.06))"
           : "drop-shadow(-1px 1px 0 rgba(0,0,0,0.06)) drop-shadow(1px 1px 0 rgba(0,0,0,0.06))",

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

@@ -10,12 +10,12 @@ import type { Component } from "solid-js";
 import type { ArrowPosition, SelectionLabelProps } from "../../types.js";
 import {
   VIEWPORT_MARGIN_PX,
-  ARROW_HEIGHT_PX,
   ARROW_CENTER_PERCENT,
   ARROW_LABEL_MARGIN_PX,
   LABEL_GAP_PX,
   PANEL_STYLES,
 } from "../../constants.js";
+import { getArrowSize } from "../../utils/get-arrow-size.js";
 import { isKeyboardEventTriggeredByInput } from "../../utils/is-keyboard-event-triggered-by-input.js";
 import { cn } from "../../utils/cn.js";
 import { getTagDisplay } from "../../utils/get-tag-display.js";
@@ -40,6 +40,7 @@ const DEFAULT_OFFSCREEN_POSITION = {
 
 export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
   let containerRef: HTMLDivElement | undefined;
+  let panelRef: HTMLDivElement | undefined;
   let inputRef: HTMLTextAreaElement | undefined;
   let isTagCurrentlyHovered = false;
   let lastValidPosition: {
@@ -53,6 +54,7 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
 
   const [measuredWidth, setMeasuredWidth] = createSignal(0);
   const [measuredHeight, setMeasuredHeight] = createSignal(0);
+  const [panelWidth, setPanelWidth] = createSignal(0);
   const [arrowPosition, setArrowPosition] =
     createSignal<ArrowPosition>("bottom");
   const [viewportVersion, setViewportVersion] = createSignal(0);
@@ -89,6 +91,9 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
       setMeasuredWidth(rect.width);
       setMeasuredHeight(rect.height);
     }
+    if (panelRef) {
+      setPanelWidth(panelRef.getBoundingClientRect().width);
+    }
   };
 
   const handleTagHoverChange = (hovered: boolean) => {
@@ -215,11 +220,13 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
     const selectionBottom = bounds.y + bounds.height;
     const selectionTop = bounds.y;
 
+    const actualArrowHeight = getArrowSize(panelWidth());
+
     // HACK: Use cursorX as anchor point, CSS transform handles centering via translateX(-50%)
     // This avoids the flicker when content changes because centering doesn't depend on JS measurement
     const anchorX = cursorX;
     let edgeOffsetX = 0;
-    let positionTop = selectionBottom + ARROW_HEIGHT_PX + LABEL_GAP_PX;
+    let positionTop = selectionBottom + actualArrowHeight + LABEL_GAP_PX;
 
     // Calculate edge clamping offset (only applied when we have valid measurements)
     if (labelWidth > 0) {
@@ -234,7 +241,7 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
       }
     }
 
-    const totalHeightNeeded = labelHeight + ARROW_HEIGHT_PX + LABEL_GAP_PX;
+    const totalHeightNeeded = labelHeight + actualArrowHeight + LABEL_GAP_PX;
     const fitsBelow =
       positionTop + labelHeight <= viewportHeight - VIEWPORT_MARGIN_PX;
 
@@ -371,6 +378,7 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
           position={arrowPosition()}
           leftPercent={computedPosition().arrowLeftPercent}
           leftOffsetPx={computedPosition().arrowLeftOffset}
+          labelWidth={panelWidth()}
         />
 
         <Show when={isCompletedStatus() && !props.error}>
@@ -394,6 +402,7 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
         </Show>
 
         <div
+          ref={panelRef}
           class={cn(
             "contain-layout flex items-center gap-[5px] rounded-[10px] antialiased w-fit h-fit p-0 [font-synthesis:none] [corner-shape:superellipse(1.25)]",
             PANEL_STYLES,

packages/react-grab/src/constants.ts

@@ -57,6 +57,8 @@ export const FROZEN_GLOW_COLOR = `rgba(${GRAB_PURPLE_RGB}, 0.15)`;
 export const FROZEN_GLOW_EDGE_PX = 50;
 
 export const ARROW_HEIGHT_PX = 8;
+export const ARROW_MIN_SIZE_PX = 4;
+export const ARROW_MAX_LABEL_WIDTH_RATIO = 0.2;
 export const ARROW_CENTER_PERCENT = 50;
 export const ARROW_LABEL_MARGIN_PX = 16;
 export const LABEL_GAP_PX = 4;

packages/react-grab/src/types.ts

@@ -544,6 +544,7 @@ export interface ArrowProps {
   leftPercent: number;
   leftOffsetPx: number;
   color?: string;
+  labelWidth?: number;
 }
 
 export interface TagBadgeProps {

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

@@ -0,0 +1,11 @@
+import {
+  ARROW_HEIGHT_PX,
+  ARROW_MIN_SIZE_PX,
+  ARROW_MAX_LABEL_WIDTH_RATIO,
+} from "../constants.js";
+
+export const getArrowSize = (labelWidth: number): number => {
+  if (labelWidth <= 0) return ARROW_HEIGHT_PX;
+  const scaledSize = labelWidth * ARROW_MAX_LABEL_WIDTH_RATIO;
+  return Math.max(ARROW_MIN_SIZE_PX, Math.min(ARROW_HEIGHT_PX, scaledSize));
+};