fix: stop leaking CSS rules from dynamic UI styles (#1084) (#1103)

* fix: stop leaking CSS rules from dynamic position styles * Fix floating surfaces on web * Stop diff controls growing Unistyles rules * Use inline style escape hatch in diff pane * Centralize dynamic style escape hatches * Restore startup workspace navigation * Upgrade Unistyles for web cleanup fix * Update review style test for inline styles * Use redirect for startup workspace restore * Update startup redirect test
2026-05-20 16:55:00 +08:00
parent 905a0985f9
commit f933bf6b3a
18 changed files with 366 additions and 186 deletions
@@ -5,6 +5,7 @@ import { StyleSheet } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
 import type { DiffLine } from "@/utils/tool-call-parsers";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 import { getCodeInsets } from "./code-insets";
 import { isWeb } from "@/constants/platform";

@@ -95,20 +96,27 @@ export function DiffViewer({
  const outerScrollStyle = React.useMemo(
    () => [
      styles.verticalScroll,
-      maxHeight !== undefined && { maxHeight },
+      maxHeight !== undefined && inlineUnistylesStyle({ maxHeight }),
      fillAvailableHeight && styles.fillHeight,
      webScrollbarStyle,
    ],
    [maxHeight, fillAvailableHeight, webScrollbarStyle],
  );
  const linesContainerStyle = React.useMemo(
-    () => [styles.linesContainer, scrollViewWidth > 0 && { minWidth: scrollViewWidth }],
+    () => [
+      styles.linesContainer,
+      scrollViewWidth > 0 && inlineUnistylesStyle({ minWidth: scrollViewWidth }),
+    ],
    [scrollViewWidth],
  );
  const keyedDiffLines = React.useMemo(
    () => diffLines.map((line, index) => ({ key: `${index}-${line.type}-${line.content}`, line })),
    [diffLines],
  );
+  const webVerticalContentStyle = React.useMemo(
+    () => [styles.verticalContent, fillAvailableHeight && styles.fillHeight],
+    [fillAvailableHeight],
+  );

  if (!diffLines.length) {
    return (
@@ -118,29 +126,39 @@ export function DiffViewer({
    );
  }

-  return (
+  const lines = (
+    <View style={linesContainerStyle}>
+      {keyedDiffLines.map(({ key, line }) => (
+        <DiffLineRow key={key} line={line} />
+      ))}
+    </View>
+  );
+
+  const horizontalScroll = (
+    <ScrollView
+      horizontal
+      nestedScrollEnabled
+      showsHorizontalScrollIndicator
+      style={webScrollbarStyle}
+      contentContainerStyle={styles.horizontalContent}
+      onLayout={handleInnerLayout}
+    >
+      {lines}
+    </ScrollView>
+  );
+
+  const content = (
    <ScrollView
      style={outerScrollStyle}
-      contentContainerStyle={styles.verticalContent}
+      contentContainerStyle={webVerticalContentStyle}
      nestedScrollEnabled
      showsVerticalScrollIndicator
    >
-      <ScrollView
-        horizontal
-        nestedScrollEnabled
-        showsHorizontalScrollIndicator
-        style={webScrollbarStyle}
-        contentContainerStyle={styles.horizontalContent}
-        onLayout={handleInnerLayout}
-      >
-        <View style={linesContainerStyle}>
-          {keyedDiffLines.map(({ key, line }) => (
-            <DiffLineRow key={key} line={line} />
-          ))}
-        </View>
-      </ScrollView>
+      {horizontalScroll}
    </ScrollView>
  );
+
+  return content;
 }

 const styles = StyleSheet.create((theme) => {
@@ -17,6 +17,7 @@ import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
 import { highlightCode, type HighlightToken } from "@getpaseo/highlight";
 import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 import { lineNumberGutterWidth } from "@/components/code-insets";
 import { isRenderedMarkdownFile } from "@/components/file-pane-render-mode";
 import { isWeb } from "@/constants/platform";
@@ -120,7 +121,10 @@ const CodeLine = React.memo(function CodeLine({
  gutterWidth,
  highlighted,
 }: CodeLineProps) {
-  const gutterStyle = useMemo(() => [codeLineStyles.gutter, { width: gutterWidth }], [gutterWidth]);
+  const gutterStyle = useMemo(
+    () => [codeLineStyles.gutter, inlineUnistylesStyle({ width: gutterWidth })],
+    [gutterWidth],
+  );
  const lineStyle = useMemo(
    () => [codeLineStyles.line, highlighted && codeLineStyles.highlightedLine],
    [highlighted],
@@ -13,6 +13,7 @@ import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
 import { buildLineDiff, parseUnifiedDiff, type DiffLine } from "@/utils/tool-call-parsers";
 import { hasMeaningfulToolCallDetail } from "@/utils/tool-call-detail-state";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 import { DiffViewer } from "./diff-viewer";
 import { getCodeInsets } from "./code-insets";
 import { isWeb } from "@/constants/platform";
@@ -79,7 +80,7 @@ function useDetailStyles(
  const codeVerticalScrollStyle = useMemo(
    () => [
      styles.codeVerticalScroll,
-      resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+      resolvedMaxHeight !== undefined && inlineUnistylesStyle({ maxHeight: resolvedMaxHeight }),
      shouldFill && styles.fillHeight,
      webScrollbarStyle,
    ],
@@ -88,7 +89,7 @@ function useDetailStyles(
  const scrollAreaFillStyle = useMemo(
    () => [
      styles.scrollArea,
-      resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+      resolvedMaxHeight !== undefined && inlineUnistylesStyle({ maxHeight: resolvedMaxHeight }),
      shouldFill && styles.fillHeight,
      webScrollbarStyle,
    ],
@@ -97,7 +98,7 @@ function useDetailStyles(
  const scrollAreaStyle = useMemo(
    () => [
      styles.scrollArea,
-      resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+      resolvedMaxHeight !== undefined && inlineUnistylesStyle({ maxHeight: resolvedMaxHeight }),
      webScrollbarStyle,
    ],
    [resolvedMaxHeight, webScrollbarStyle],
@@ -20,6 +20,8 @@ import {
  useWindowDimensions,
  type LayoutChangeEvent,
  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
 } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -56,6 +58,7 @@ import {
  SheetHeaderView,
  type SheetHeader,
 } from "@/components/adaptive-modal-sheet";
+import { FloatingSurface } from "@/components/ui/floating";

 const IS_WEB = isWeb;

@@ -858,7 +861,7 @@ interface DesktopContainerStyleInput {
  availableHeight: number | undefined;
 }

-function buildDesktopContainerStyle(input: DesktopContainerStyleInput) {
+function buildDesktopFrameStyle(input: DesktopContainerStyleInput): StyleProp<ViewStyle> {
  const {
    desktopMinWidth,
    referenceWidth,
@@ -877,7 +880,6 @@ function buildDesktopContainerStyle(input: DesktopContainerStyleInput) {
      ? { maxHeight: Math.min(availableHeight, desktopFixedHeight ?? 400) }
      : null;
  return [
-    styles.desktopContainer,
    {
      position: "absolute" as const,
      minWidth: desktopMinWidth ?? referenceWidth ?? 200,
@@ -1070,7 +1072,7 @@ interface DesktopBodyProps {
  handleClose: () => void;
  refs: ReturnType<typeof useFloating>["refs"];
  shouldUseDesktopFade: boolean;
-  desktopContainerStyle: unknown;
+  desktopFrameStyle: StyleProp<ViewStyle>;
  handleDesktopContentLayout: (event: LayoutChangeEvent) => void;
  header: SheetHeader | undefined;
  stickyHeader: ReactNode;
@@ -1191,11 +1193,12 @@ function DesktopComboboxBody(props: DesktopBodyProps): ReactElement {
    >
      <View ref={props.refs.setOffsetParent} collapsable={false} style={styles.desktopOverlay}>
        <Pressable style={styles.desktopBackdrop} onPress={props.handleClose} />
-        <Animated.View
+        <FloatingSurface
          testID="combobox-desktop-container"
          entering={props.shouldUseDesktopFade ? FadeIn.duration(100) : undefined}
          exiting={props.shouldUseDesktopFade ? FadeOut.duration(100) : undefined}
-          style={props.desktopContainerStyle as never}
+          style={styles.desktopContainer}
+          frameStyle={props.desktopFrameStyle}
          ref={props.refs.setFloating}
          collapsable={false}
          onLayout={props.handleDesktopContentLayout}
@@ -1227,7 +1230,7 @@ function DesktopComboboxBody(props: DesktopBodyProps): ReactElement {
              renderOption={props.renderOption}
            />
          )}
-        </Animated.View>
+        </FloatingSurface>
      </View>
    </Modal>
  );
@@ -1492,9 +1495,9 @@ export function Combobox({
    [theme.colors.palette.zinc],
  );

-  const desktopContainerStyle = useMemo(
+  const desktopFrameStyle = useMemo(
    () =>
-      buildDesktopContainerStyle({
+      buildDesktopFrameStyle({
        desktopMinWidth,
        referenceWidth,
        desktopFixedHeight,
@@ -1561,7 +1564,7 @@ export function Combobox({
      handleClose={handleClose}
      refs={refs}
      shouldUseDesktopFade={shouldUseDesktopFade}
-      desktopContainerStyle={desktopContainerStyle}
+      desktopFrameStyle={desktopFrameStyle}
      handleDesktopContentLayout={handleDesktopContentLayout}
      header={header}
      stickyHeader={stickyHeader}
@@ -18,7 +18,6 @@ import {
  Modal,
  Platform,
  Pressable,
-  ScrollView,
  StatusBar,
  Text,
  View,
@@ -28,7 +27,7 @@ import {
  type StyleProp,
  type ViewStyle,
 } from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, CheckCircle } from "lucide-react-native";
@@ -38,6 +37,7 @@ import {
  IsolatedBottomSheetModal,
  useIsolatedBottomSheetVisibility,
 } from "@/components/ui/isolated-bottom-sheet-modal";
+import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
 import { isWeb, isNative } from "@/constants/platform";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";

@@ -498,7 +498,7 @@ export function ContextMenuContent({
    [],
  );

-  const animatedContentStyle = useMemo(() => {
+  const frameStyle = useMemo(() => {
    const { width: screenWidth } = Dimensions.get("window");
    const resolvedWidthStyle: ViewStyle = fullWidth
      ? { width: screenWidth - horizontalPadding * 2 }
@@ -508,7 +508,6 @@ export function ContextMenuContent({
          ...(typeof maxWidth === "number" ? { maxWidth } : null),
        };
    return [
-      styles.content,
      resolvedWidthStyle,
      {
        position: "absolute" as const,
@@ -566,23 +565,24 @@ export function ContextMenuContent({
          onPress={handleClose}
          testID={testID ? `${testID}-backdrop` : undefined}
        />
-        <Animated.View
+        <FloatingSurface
          entering={FadeIn.duration(100)}
          exiting={FadeOut.duration(100)}
          collapsable={false}
          testID={testID}
          onLayout={handleContentLayout}
-          style={animatedContentStyle}
+          style={styles.content}
+          frameStyle={frameStyle}
        >
-          <ScrollView
+          <FloatingScrollView
            bounces={false}
            showsVerticalScrollIndicator
            style={webScrollbarStyle}
            contentContainerStyle={SCROLL_CONTENT_CONTAINER_STYLE}
          >
            {children}
-          </ScrollView>
-        </Animated.View>
+          </FloatingScrollView>
+        </FloatingSurface>
      </View>
    </Modal>
  );
@@ -14,7 +14,6 @@ import {
  ActivityIndicator,
  Modal,
  Pressable,
-  ScrollView,
  Text,
  View,
  Dimensions,
@@ -25,10 +24,10 @@ import {
  type ViewStyle,
  type StyleProp,
 } from "react-native";
-import Animated, { Keyframe, runOnJS } from "react-native-reanimated";
+import { Keyframe, runOnJS } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Check, CheckCircle } from "lucide-react-native";
-import { isWeb } from "@/constants/platform";
+import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";

@@ -172,42 +171,37 @@ function computePosition({
  return { x, y, actualPlacement };
 }

-interface SharedDropdownContentProps {
-  collapsable: false;
-  testID?: string;
-  style: StyleProp<ViewStyle>;
-}
-
 function renderDropdownSurface(input: {
-  isWebSurface: boolean;
-  sharedProps: SharedDropdownContentProps;
+  frameStyle: StyleProp<ViewStyle>;
+  testID?: string;
+  surfaceStyle: StyleProp<ViewStyle>;
  scrollable: boolean;
  scrollViewportStyle: StyleProp<ViewStyle>;
  content: ReactElement;
  onExited: () => void;
 }): ReactElement {
-  const { isWebSurface, sharedProps, scrollable, scrollViewportStyle, content, onExited } = input;
+  const { frameStyle, testID, surfaceStyle, scrollable, scrollViewportStyle, content, onExited } =
+    input;

  const body = scrollable ? (
-    <ScrollView
+    <FloatingScrollView
      bounces={false}
      showsVerticalScrollIndicator
      style={scrollViewportStyle}
      contentContainerStyle={DROPDOWN_SCROLL_CONTENT_STYLE}
    >
      {content}
-    </ScrollView>
+    </FloatingScrollView>
  ) : (
    content
  );

-  if (isWebSurface) {
-    return <View {...sharedProps}>{body}</View>;
-  }
-
  return (
-    <Animated.View
-      {...sharedProps}
+    <FloatingSurface
+      collapsable={false}
+      testID={testID}
+      style={surfaceStyle}
+      frameStyle={frameStyle}
      entering={contentEntering}
      exiting={contentExiting.withCallback((finished) => {
        "worklet";
@@ -217,7 +211,7 @@ function renderDropdownSurface(input: {
      })}
    >
      {body}
-    </Animated.View>
+    </FloatingSurface>
  );
 }

@@ -513,7 +507,8 @@ export function DropdownMenuContent({
    [],
  );

-  const contentStyle = useMemo(() => {
+  const surfaceStyle = styles.content;
+  const frameStyle = useMemo(() => {
    const { width: screenWidth } = Dimensions.get("window");
    const resolvedWidthStyle: ViewStyle = fullWidth
      ? { width: screenWidth - horizontalPadding * 2 }
@@ -523,7 +518,6 @@ export function DropdownMenuContent({
          ...(typeof maxWidth === "number" ? { maxWidth } : null),
        };
    return [
-      styles.content,
      resolvedWidthStyle,
      {
        position: "absolute" as const,
@@ -543,14 +537,6 @@ export function DropdownMenuContent({
    actualPlacement,
    align,
  ]);
-  const sharedContentProps = useMemo(
-    () => ({
-      collapsable: false as const,
-      testID,
-      style: contentStyle,
-    }),
-    [testID, contentStyle],
-  );
  const scrollViewportStyle = useMemo(
    () => [webScrollbarStyle, visibleContentSize ? { height: visibleContentSize.height } : null],
    [visibleContentSize, webScrollbarStyle],
@@ -583,8 +569,9 @@ export function DropdownMenuContent({
        />
        {!closing
          ? renderDropdownSurface({
-              isWebSurface: isWeb,
-              sharedProps: sharedContentProps,
+              frameStyle,
+              testID,
+              surfaceStyle,
              scrollable,
              scrollViewportStyle,
              content,
@@ -0,0 +1,63 @@
+import { forwardRef, useMemo, type ComponentProps, type ReactElement, type ReactNode } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  type ScrollViewProps,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from "react-native";
+import Animated from "react-native-reanimated";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+
+export interface FloatingSurfaceProps extends Omit<ComponentProps<typeof Animated.View>, "style"> {
+  frameStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const FloatingSurface = forwardRef<View, FloatingSurfaceProps>(function FloatingSurface(
+  { frameStyle, style, ...props },
+  ref,
+): ReactElement {
+  const inlineFrameStyle = useMemo(() => {
+    const flattened = StyleSheet.flatten(frameStyle);
+    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+  }, [frameStyle]);
+  const surfaceStyle = useMemo(() => [style, inlineFrameStyle], [inlineFrameStyle, style]);
+  return <Animated.View {...props} ref={ref} style={surfaceStyle} />;
+});
+
+export interface FloatingScrollViewProps {
+  bounces?: boolean;
+  children: ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  keyboardShouldPersistTaps?: ScrollViewProps["keyboardShouldPersistTaps"];
+  showsVerticalScrollIndicator?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function FloatingScrollView({
+  bounces,
+  children,
+  contentContainerStyle,
+  keyboardShouldPersistTaps,
+  showsVerticalScrollIndicator,
+  style,
+}: FloatingScrollViewProps): ReactElement {
+  const inlineStyle = useMemo(() => {
+    const flattened = StyleSheet.flatten(style);
+    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+  }, [style]);
+
+  return (
+    <ScrollView
+      bounces={bounces}
+      contentContainerStyle={contentContainerStyle}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      style={inlineStyle}
+    >
+      {children}
+    </ScrollView>
+  );
+}
@@ -25,9 +25,10 @@ import {
 } from "react-native";
 import { Portal } from "@gorhom/portal";
 import { useBottomSheetModalInternal } from "@gorhom/bottom-sheet";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
+import { FloatingSurface } from "@/components/ui/floating";
 import { isWeb } from "@/constants/platform";

 type Side = "top" | "bottom" | "left" | "right";
@@ -494,19 +495,18 @@ export function TooltipContent({
    [],
  );

-  const contentStyle = useMemo(
+  const frameStyle = useMemo(
    () => [
-      styles.content,
-      { maxWidth },
-      style,
      {
        position: "absolute" as const,
        top: position?.y ?? -9999,
        left: position?.x ?? -9999,
+        maxWidth,
      },
    ],
-    [maxWidth, style, position?.x, position?.y],
+    [maxWidth, position?.x, position?.y],
  );
+  const contentStyle = useMemo(() => [styles.content, style], [style]);

  const handleDismiss = useCallback(() => ctx.setOpen(false), [ctx]);

@@ -519,7 +519,7 @@ export function TooltipContent({
    return (
      <Portal hostName={bottomSheetInternal?.hostName}>
        <View pointerEvents="none" style={styles.portalOverlay}>
-          <Animated.View
+          <FloatingSurface
            pointerEvents="none"
            entering={FadeIn.duration(80)}
            exiting={FadeOut.duration(80)}
@@ -527,9 +527,10 @@ export function TooltipContent({
            testID={testID}
            onLayout={handleLayout}
            style={contentStyle}
+            frameStyle={frameStyle}
          >
            {children}
-          </Animated.View>
+          </FloatingSurface>
        </View>
      </Portal>
    );
@@ -544,7 +545,7 @@ export function TooltipContent({
      onRequestClose={handleDismiss}
    >
      <Pressable style={styles.overlay} onPress={handleDismiss}>
-        <Animated.View
+        <FloatingSurface
          pointerEvents="none"
          entering={FadeIn.duration(80)}
          exiting={FadeOut.duration(80)}
@@ -552,9 +553,10 @@ export function TooltipContent({
          testID={testID}
          onLayout={handleLayout}
          style={contentStyle}
+          frameStyle={frameStyle}
        >
          {children}
-        </Animated.View>
+        </FloatingSurface>
      </Pressable>
    </Modal>
  );
@@ -1,17 +1,20 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  PanResponder,
-  View,
+  type GestureResponderEvent,
  type LayoutChangeEvent,
  type NativeScrollEvent,
  type NativeSyntheticEvent,
+  type ViewStyle,
+  View,
 } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { isWeb as platformIsWeb } from "@/constants/platform";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 import {
  computeScrollOffsetFromDragDelta,
  computeVerticalScrollbarGeometry,
 } from "./web-desktop-scrollbar.math";
-import { isWeb as platformIsWeb } from "@/constants/platform";

 const METRICS_EPSILON = 0.5;
 const HANDLE_WIDTH_IDLE = 6;
@@ -27,6 +30,15 @@ const HANDLE_WIDTH_TRANSITION_DURATION_MS = 240;
 const HANDLE_SCROLL_VISIBILITY_MS = 1200;
 const HANDLE_SCROLL_ACTIVE_MS = 110;

+interface WebPointerStyle {
+  cursor?: "grab" | "grabbing";
+  touchAction?: "none";
+  userSelect?: "none";
+  transitionProperty?: string;
+  transitionDuration?: string;
+  transitionTimingFunction?: string;
+}
+
 interface PointerLikeEvent {
  clientY?: number;
  pageY?: number;
@@ -59,6 +71,13 @@ function areMetricsEqual(a: ScrollbarMetrics, b: ScrollbarMetrics): boolean {
  );
 }

+interface WebDesktopScrollbarOverlayProps {
+  enabled: boolean;
+  metrics: ScrollbarMetrics;
+  onScrollToOffset: (offset: number) => void;
+  inverted?: boolean;
+}
+
 export function useWebDesktopScrollbarMetrics() {
  const [metrics, setMetrics] = useState<ScrollbarMetrics>({
    offset: 0,
@@ -115,13 +134,6 @@ export function useWebDesktopScrollbarMetrics() {
  };
 }

-interface WebDesktopScrollbarOverlayProps {
-  enabled: boolean;
-  metrics: ScrollbarMetrics;
-  onScrollToOffset: (offset: number) => void;
-  inverted?: boolean;
-}
-
 export function WebDesktopScrollbarOverlay({
  enabled,
  metrics,
@@ -273,8 +285,12 @@ export function WebDesktopScrollbarOverlay({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderTerminationRequest: () => false,
-      onPanResponderGrant: () => {
+      onPanResponderGrant: (event: GestureResponderEvent) => {
+        const clientY = readClientY(event);
        dragStartOffsetRef.current = normalizedOffsetRef.current;
+        if (clientY !== null) {
+          dragStartClientYRef.current = clientY;
+        }
        setIsDragging(true);
      },
      onPanResponderMove: (_event, gestureState) => {
@@ -362,20 +378,19 @@ export function WebDesktopScrollbarOverlay({
  const thumbRegionStyle = useMemo(
    () => [
      styles.thumbRegion,
-      {
-        top: 0,
+      inlineUnistylesStyle({
        height: thumbRegionHeight,
        transform: [{ translateY: thumbRegionOffset }],
-      },
+      }),
      platformIsWeb &&
-        ({
+        inlineUnistylesStyle({
          cursor: handleCursor,
          touchAction: "none",
          userSelect: "none",
          transitionProperty: "transform",
          transitionDuration: `${handleTravelDurationMs}ms`,
          transitionTimingFunction: "linear",
-        } as object),
+        } satisfies WebPointerStyle as unknown as ViewStyle),
    ],
    [thumbRegionHeight, thumbRegionOffset, handleCursor, handleTravelDurationMs],
  );
@@ -383,19 +398,19 @@ export function WebDesktopScrollbarOverlay({
  const handleStyle = useMemo(
    () => [
      styles.handle,
-      {
+      inlineUnistylesStyle({
        marginTop: handleInsetTop,
        height: geometry.handleSize,
        width: handleWidth,
        backgroundColor: handleColor,
        opacity: handleOpacity,
-      },
+      }),
      platformIsWeb &&
-        ({
+        inlineUnistylesStyle({
          transitionProperty: "opacity, width, background-color",
          transitionDuration: `${HANDLE_FADE_DURATION_MS}ms, ${HANDLE_WIDTH_TRANSITION_DURATION_MS}ms, ${HANDLE_FADE_DURATION_MS}ms`,
          transitionTimingFunction: "ease-out, cubic-bezier(0.22, 0.75, 0.2, 1), ease-out",
-        } as object),
+        } satisfies WebPointerStyle as unknown as ViewStyle),
    ],
    [handleInsetTop, geometry.handleSize, handleWidth, handleColor, handleOpacity],
  );
@@ -413,8 +428,6 @@ export function WebDesktopScrollbarOverlay({
        {...(platformIsWeb
          ? ({
              onPointerDown: startWebDrag,
-              onPointerEnter: handleGrabHoverIn,
-              onPointerLeave: handleGrabHoverOut,
              onMouseEnter: handleGrabHoverIn,
              onMouseLeave: handleGrabHoverOut,
            } as object)
@@ -446,5 +459,6 @@ const styles = StyleSheet.create(() => ({
    position: "absolute",
    right: -3,
    width: HANDLE_GRAB_WIDTH,
+    top: 0,
  },
 }));
@@ -9,7 +9,7 @@ import {
  type ReactNode,
 } from "react";
 import { Dimensions, Text, View } from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { CircleCheck, CircleDot, CircleX, ExternalLink } from "lucide-react-native";
 import { GitHubIcon } from "@/components/icons/github-icon";
@@ -24,6 +24,7 @@ import { openExternalUrl } from "@/utils/open-external-url";
 import { PrBadge } from "@/components/sidebar-workspace-list";
 import { useHoverSafeZone } from "@/hooks/use-hover-safe-zone";
 import { useIsCompactFormFactor } from "@/constants/layout";
+import { FloatingSurface } from "@/components/ui/floating";
 import { isWeb } from "@/constants/platform";

 interface Rect {
@@ -254,23 +255,19 @@ function WorkspaceHoverCardContent({
    [],
  );

-  const cardStyle = useMemo(
-    () => [
-      styles.card,
-      {
-        width: HOVER_CARD_WIDTH,
-        position: "absolute" as const,
-        top: position?.y ?? -9999,
-        left: position?.x ?? -9999,
-      },
-    ],
+  const frameStyle = useMemo(
+    () => ({
+      position: "absolute" as const,
+      top: position?.y ?? -9999,
+      left: position?.x ?? -9999,
+    }),
    [position?.x, position?.y],
  );

  return (
    <Portal hostName={bottomSheetInternal?.hostName}>
      <View pointerEvents="box-none" style={styles.portalOverlay}>
-        <Animated.View
+        <FloatingSurface
          ref={contentRef}
          entering={FadeIn.duration(80)}
          exiting={FadeOut.duration(80)}
@@ -279,7 +276,8 @@ function WorkspaceHoverCardContent({
          accessibilityRole="menu"
          accessibilityLabel="Workspace scripts"
          testID="workspace-hover-card"
-          style={cardStyle}
+          style={styles.card}
+          frameStyle={frameStyle}
        >
          <View style={styles.cardHeader}>
            <Text style={styles.cardTitle} numberOfLines={1} testID="hover-card-workspace-name">
@@ -303,7 +301,7 @@ function WorkspaceHoverCardContent({
              <ChecksSummaryPressable checks={prHint.checks} url={prHint.url} />
            </>
          ) : null}
-        </Animated.View>
+        </FloatingSurface>
      </View>
    </Portal>
  );
@@ -441,6 +439,7 @@ const styles = StyleSheet.create((theme) => ({
    borderColor: theme.colors.borderAccent,
    borderRadius: theme.borderRadius.lg,
    paddingTop: theme.spacing[2],
+    width: HOVER_CARD_WIDTH,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,