fix(stack-trace): show full file path in tooltip without truncation

static/app/components/HoverScrollable.tsx

@@ -0,0 +1,203 @@
+import {useLayoutEffect, useRef, useState} from 'react';
+import styled from '@emotion/styled';
+
+import {Container} from '@sentry/scraps/layout';
+
+import {OverflowText} from 'sentry/components/OverflowText';
+
+interface HoverScrollableProps {
+  value: string;
+  className?: string;
+  edgeWidth?: number;
+  leftTrim?: boolean;
+  speed?: number;
+}
+
+export function HoverScrollable({
+  value,
+  className,
+  leftTrim = false,
+  speed = 0.1,
+  edgeWidth = 40,
+}: HoverScrollableProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const contentRef = useRef<HTMLSpanElement>(null);
+  const animationRef = useRef<Animation | null>(null);
+  const direction = useRef<boolean | null>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const targetRef = useRef(0);
+  const scrollWidthRef = useRef(0);
+
+  const showSlidingText = isHovered && isTruncated;
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+
+    if (!showSlidingText || !container || !content) {
+      return;
+    }
+
+    const maxTranslate = content.scrollWidth - container.clientWidth;
+    const truncated = maxTranslate > 0;
+
+    setIsTruncated(truncated);
+
+    if (!truncated) {
+      animationRef.current?.cancel();
+      animationRef.current = null;
+      direction.current = null;
+      content.style.transform = '';
+      return;
+    }
+
+    // When the hover container appears or its text changes, snap left-trimmed
+    // content to the rightmost edge.
+    if (leftTrim) {
+      content.style.transform = `translateX(${-maxTranslate}px)`;
+    }
+  }, [leftTrim, showSlidingText, value]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseHover = (event: React.MouseEvent<HTMLSpanElement>) => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+
+    if (!container || !content) {
+      return;
+    }
+
+    const rect = container.getBoundingClientRect();
+    const maxTranslate = content.scrollWidth - container.clientWidth;
+
+    if (maxTranslate <= 0) {
+      return;
+    }
+
+    if (scrollWidthRef.current !== content.scrollWidth) {
+      scrollWidthRef.current = content.scrollWidth;
+      direction.current = null;
+    }
+
+    const mouseX = event.clientX - rect.left;
+
+    let target: number | null = null;
+
+    // left
+    if (mouseX <= edgeWidth) {
+      target = 0;
+      if (direction.current === false) {
+        // already moving left, no need to restart animation
+        return;
+      }
+      direction.current = false;
+    }
+
+    // right
+    if (rect.width - mouseX <= edgeWidth) {
+      target = -maxTranslate;
+      if (direction.current === true) {
+        // already moving right, no need to restart animation
+        return;
+      }
+      direction.current = true;
+    }
+
+    // middle
+    if (target === null) {
+      if (direction.current !== null) {
+        animationRef.current?.commitStyles();
+        animationRef.current?.cancel();
+        animationRef.current = null;
+        direction.current = null;
+      }
+      return;
+    }
+
+    // a new target
+    // animationRef.current?.play();
+
+    targetRef.current = target;
+
+    const currentX = getCurrentTranslateX(content);
+    const distance = Math.abs(target - currentX);
+    const duration = distance / speed;
+
+    animationRef.current?.cancel();
+
+    animationRef.current = content.animate(
+      [
+        {
+          transform: getComputedStyle(content).transform,
+        },
+        {
+          transform: `translateX(${target}px)`,
+        },
+      ],
+      {
+        duration,
+        easing: 'linear',
+        fill: 'forwards',
+      }
+    );
+  };
+
+  const handleMouseLeave = () => {
+    animationRef.current?.cancel();
+    animationRef.current = null;
+    direction.current = null;
+
+    setIsHovered(false);
+  };
+
+  return (
+    <Container
+      ref={wrapperRef}
+      as="span"
+      className={className}
+      display="inline-block"
+      maxWidth="100%"
+      width="100%"
+      overflow="hidden"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {showSlidingText ? (
+        <SlidingContainer ref={containerRef} onMouseMove={handleMouseHover}>
+          <SlidingText ref={contentRef}>{value}</SlidingText>
+        </SlidingContainer>
+      ) : (
+        <OverflowText value={value} leftTrim={leftTrim} onTrimChange={setIsTruncated} />
+      )}
+    </Container>
+  );
+}
+
+function getCurrentTranslateX(element: HTMLElement) {
+  const transform = window.getComputedStyle(element).transform;
+
+  if (transform === 'none') {
+    return 0;
+  }
+
+  return new DOMMatrixReadOnly(transform).m41;
+}
+
+const SlidingContainer = styled('span')`
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  vertical-align: bottom;
+`;
+
+const SlidingText = styled('span')`
+  display: inline-block;
+  white-space: nowrap;
+`;

static/app/components/OverflowText.tsx

@@ -0,0 +1,52 @@
+import {useEffect, useRef} from 'react';
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+interface OverflowTextProps {
+  value: string;
+  className?: string;
+  leftTrim?: boolean;
+  onTrimChange?: (trimmed: boolean) => void;
+}
+
+export function OverflowText({
+  value,
+  className,
+  leftTrim = false,
+  onTrimChange,
+}: OverflowTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+
+    const trimmed = el.scrollWidth > el.clientWidth;
+
+    onTrimChange?.(trimmed);
+  }, [value, onTrimChange]);
+
+  return (
+    <TruncatedSpan ref={ref} className={className} leftTrim={leftTrim}>
+      {leftTrim ? <span dir="ltr">{value}</span> : value}
+    </TruncatedSpan>
+  );
+}
+
+const TruncatedSpan = styled('span')<{leftTrim: boolean}>`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+
+  ${p =>
+    p.leftTrim &&
+    css`
+      direction: rtl;
+      text-align: left;
+    `}
+`;

static/app/components/events/interfaces/frame/defaultTitle/index.tsx

@@ -13,6 +13,7 @@ import {
   trimPackage,
 } from 'sentry/components/events/interfaces/frame/utils';
 import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
+import {HoverScrollable} from 'sentry/components/HoverScrollable';
 import {QuestionTooltip} from 'sentry/components/questionTooltip';
 import {Truncate} from 'sentry/components/truncate';
 import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
@@ -139,7 +140,7 @@ export function DefaultTitle({
                 meta={pathNameOrModule.meta}
               />
             ) : (
-              <Truncate value={pathNameOrModule.value} maxLength={100} leftTrim />
+              <HoverScrollable value={pathNameOrModule.value} leftTrim />
             )}
           </code>
         </Tooltip>

static/app/components/events/interfaces/frame/deprecatedLine.tsx

@@ -389,7 +389,13 @@ const DefaultLineTitleWrapper = styled('div')<{isInAppFrame: boolean}>`
 const LeftLineTitle = styled('div')`
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
   min-width: 0;
+
+  > div {
+    min-width: 0;
+    max-width: 100%;
+  }
 `;
 
 const RepeatedContent = styled(LeftLineTitle)`
@@ -418,6 +424,7 @@ const DefaultLine = styled('div')<{
   min-height: 40px;
   word-break: break-word;
   padding: ${p => p.theme.space.sm} ${p => p.theme.space.lg};
+  gap: ${p => p.theme.space.sm} ${p => p.theme.space.lg};
   font-size: ${p => p.theme.font.size.sm};
   line-height: 16px;
   cursor: ${p => (p.isExpandable ? 'pointer' : 'default')};