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

packages/app/src/components/ui/context-menu.tsx

@@ -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>
   );