diff --git a/packages/app/src/components/file-explorer-pane.tsx b/packages/app/src/components/file-explorer-pane.tsx
index bd33013b5..c634dc43c 100644
--- a/packages/app/src/components/file-explorer-pane.tsx
+++ b/packages/app/src/components/file-explorer-pane.tsx
@@ -685,7 +685,12 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
-
+
) : null}
@@ -853,7 +858,12 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
-
+
) : null}
@@ -864,11 +874,36 @@ function FilePreviewBody({
preview,
isLoading,
variant,
+ showDesktopWebScrollbar,
}: {
preview: ExplorerFile | null;
isLoading: boolean;
variant: "inline" | "sheet";
+ showDesktopWebScrollbar: boolean;
}) {
+ const enablePreviewDesktopScrollbar =
+ variant === "inline" && showDesktopWebScrollbar;
+ const previewScrollRef = useRef(null);
+ const previewScrollbarMetrics = useWebDesktopScrollbarMetrics();
+
+ const handlePreviewScroll = useCallback(
+ (event: NativeSyntheticEvent) => {
+ if (enablePreviewDesktopScrollbar) {
+ previewScrollbarMetrics.onScroll(event);
+ }
+ },
+ [enablePreviewDesktopScrollbar, previewScrollbarMetrics]
+ );
+
+ const handlePreviewLayout = useCallback(
+ (event: LayoutChangeEvent) => {
+ if (enablePreviewDesktopScrollbar) {
+ previewScrollbarMetrics.onLayout(event);
+ }
+ },
+ [enablePreviewDesktopScrollbar, previewScrollbarMetrics]
+ );
+
if (isLoading && !preview) {
return (
@@ -902,16 +937,37 @@ function FilePreviewBody({
);
}
return (
-
+
- {preview.content}
+
+ {preview.content}
+
-
+ {
+ previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
+ }}
+ />
+
);
}
@@ -930,15 +986,37 @@ function FilePreviewBody({
);
}
return (
-
-
+
+
+
+ {
+ previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
}}
- style={styles.previewImage}
- resizeMode="contain"
/>
-
+
);
}
@@ -1377,6 +1455,11 @@ const styles = StyleSheet.create((theme) => ({
previewContent: {
flex: 1,
},
+ previewScrollContainer: {
+ flex: 1,
+ minHeight: 0,
+ position: "relative",
+ },
previewCodeScrollContent: {
paddingTop: theme.spacing[3],
paddingHorizontal: theme.spacing[3],