Merge pull request #237 from rclone-ui/pullrequests/zyf722/fix/win-toolbar-clipping

windows toolbar clipping

lib/window.ts

@@ -1,6 +1,5 @@
 import { invoke } from '@tauri-apps/api/core'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
-import { platform } from '@tauri-apps/plugin-os'
 
 export async function openFullWindow({
     name,
@@ -20,7 +19,7 @@ export async function openWindow({
     name,
     url,
     width = 840,
-    height = platform() === 'windows' ? 755 : 725,
+    height = 725,
 }: {
     name: string
     url: string

src-tauri/common/shortcut.rs

@@ -13,6 +13,16 @@ const TOOLBAR_WIDTH: f64 = 702.0;
 #[cfg(target_os = "windows")]
 const TOOLBAR_HEIGHT: f64 = 460.0;
 
+// #[cfg(target_os = "windows")]
+// fn refresh_toolbar_bounds(window: &WebviewWindow) -> Result<(), tauri::Error> {
+//     // WebView2 can retain stale bounds when this initially-hidden window is shown.
+//     // A real resize (for example maximizing the window) fixes the clipped viewport,
+//     // so force the same bounds refresh without leaving the toolbar enlarged.
+//     window.set_size(tauri::LogicalSize::new(TOOLBAR_WIDTH + 1.0, TOOLBAR_HEIGHT))?;
+//     window.set_size(tauri::LogicalSize::new(TOOLBAR_WIDTH, TOOLBAR_HEIGHT))?;
+//     Ok(())
+// }
+
 fn create_toolbar_window(app_handle: &AppHandle) -> Result<WebviewWindow, tauri::Error> {
     let monitor = match app_handle.primary_monitor()? {
         Some(monitor) => monitor,
@@ -35,9 +45,17 @@ fn create_toolbar_window(app_handle: &AppHandle) -> Result<WebviewWindow, tauri:
         let logical_size = physical_size.to_logical::<f64>(scale_factor);
         let logical_position = physical_position.to_logical::<f64>(scale_factor);
 
+        let toolbar_width = TOOLBAR_WIDTH / scale_factor;
+        let toolbar_height = TOOLBAR_HEIGHT / scale_factor;
+
         // Calculate position in logical pixels, centered on the primary monitor
-        let pos_x = logical_position.x + (logical_size.width - TOOLBAR_WIDTH) / 2.0;
+        let pos_x =
-        let pos_y = logical_position.y + logical_size.height / 4.0;
+            logical_position.x
+            + (logical_size.width - toolbar_width) / 2.0;
+
+        let pos_y =
+            logical_position.y
+            + logical_size.height / 4.0;
 
         WebviewWindowBuilder::new(
             app_handle,
@@ -45,7 +63,7 @@ fn create_toolbar_window(app_handle: &AppHandle) -> Result<WebviewWindow, tauri:
             tauri::WebviewUrl::App("/toolbar".into()),
         )
         .title(TOOLBAR_WINDOW_LABEL)
-        .inner_size(TOOLBAR_WIDTH, TOOLBAR_HEIGHT)
+        .inner_size(toolbar_width, toolbar_height)
         .position(pos_x, pos_y)
         .resizable(false)
         .decorations(false)
@@ -119,6 +137,8 @@ pub fn show_toolbar_window(app_handle: &AppHandle) -> Result<(), tauri::Error> {
     if let Some(window) = app_handle.get_webview_window(TOOLBAR_WINDOW_LABEL) {
         window.show()?;
         window.unminimize()?;
+        // #[cfg(target_os = "windows")]
+        // refresh_toolbar_bounds(&window)?;
         window.set_focus()?;
         #[cfg(target_os = "linux")]
         focus_window_linux(app_handle, &window);
@@ -136,6 +156,8 @@ fn open_toolbar(app_handle: &AppHandle) -> Result<(), tauri::Error> {
         } else {
             window.show()?;
             window.unminimize()?;
+            // #[cfg(target_os = "windows")]
+            // refresh_toolbar_bounds(&window)?;
             window.set_focus()?;
             #[cfg(target_os = "linux")]
             focus_window_linux(app_handle, &window);

src-tauri/common/window.rs

@@ -157,16 +157,30 @@ pub async fn open_window(
         return Ok(());
     }
 
-	let os = std::env::consts::OS;
-
-    let default_height = if os == "windows" { 755.0 } else { 725.0 };
     let width = width.unwrap_or(840.0);
-    let height = height.unwrap_or(default_height);
+    let height = height.unwrap_or(725.0);
+
+    #[cfg(target_os = "windows")]
+	{
+    	let monitor = match app_handle.primary_monitor().map_err(|e| e.to_string())? {
+            Some(monitor) => monitor,
+            None => app_handle
+                .available_monitors()
+                .map_err(|e| e.to_string())?
+                .into_iter()
+                .next()
+                .ok_or("No monitors available")?,
+        };
+
+	    let scale_factor = monitor.scale_factor();
+	    width = width / scale_factor;
+        height = height / scale_factor;
+	}
 
     let mut builder = WebviewWindowBuilder::new(&app_handle, &name, WebviewUrl::App(url.into()))
         .title(&name)
         .inner_size(width, height)
-        .min_inner_size(700.0, 700.0)
+        .min_inner_size(650.0, 500.0)
         .max_inner_size(1000.0, 1000.0)
         .resizable(true)
         .visible(false)

src-tauri/src/main.rs

@@ -48,7 +48,7 @@ fn main() {
     }
 	#[cfg(target_os = "windows")]
 	{
-		std::env::set_var("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--ignore-gpu-blocklist");
+		std::env::set_var("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--ignore-gpu-blocklist --force-device-scale-factor=1 --disable-features=msWebOOUI");
 	}
     let _ = fix_path_env::fix();
     app_lib::run();

src/pages/Toolbar.tsx

@@ -499,10 +499,15 @@ export default function Toolbar() {
     }, [highlightedIndex, engineResults])
 
     return (
-        <div className="flex flex-col items-center justify-center w-full h-screen pb-[15vh]">
+        <div
+            className={cn(
+                'flex flex-col items-center justify-center w-full h-screen overflow-hidden',
+                !isWindows && 'pb-[15vh]'
+            )}
+        >
             <div
                 ref={activeAreaRef}
-                className="flex border-divider border flex-col items-center justify-center bg-content2/[0.97] w-[700px] rounded-large"
+                className="flex border-divider border flex-col items-center justify-center bg-content2/[0.97] w-full max-w-[700px] max-h-full rounded-large"
             >
                 <div
                     data-tauri-drag-region={true}
@@ -532,7 +537,10 @@ export default function Toolbar() {
 
                 <Divider />
 
-                <ScrollShadow className="h-[400px] w-full p-2" onMouseMove={handleMouseMove}>
+                <ScrollShadow
+                    className="h-[400px] min-h-0 w-full p-2"
+                    onMouseMove={handleMouseMove}
+                >
                     {engineResults.map((result, index) => {
                         const isActive = index === highlightedIndex
                         const elementId = `tb-result-${result.id.replace(ELEMENT_ID_REGEX, '-')}`