apply different window width on windows

client/ui/frontend/src/lib/platform.ts

@@ -1,33 +1,34 @@
 import { System } from "@wailsio/runtime";
 
 export type Platform = {
-  isWindows11: boolean;
+  isWindows: boolean;
   isMacOS: boolean;
-  isOtherOS: boolean;
 };
 
 let cached: Platform | null = null;
 
-// Windows 11 is Windows NT 10.0 with build number >= 22000.
-function parseWindows11(version: string): boolean {
-  const match = version.match(/(\d+)\.(\d+)\.(\d+)/);
-  if (!match) return false;
-  return parseInt(match[3], 10) >= 22000;
-}
-
 export async function initPlatform(): Promise<void> {
   if (cached) return;
-  const isMacOS = System.IsMac();
-  const isWindows = System.IsWindows();
-  let isWindows11 = false;
-  if (isWindows) {
-    const env = await System.Environment();
-    isWindows11 = parseWindows11(env.OSInfo?.Version ?? "");
+
+  // Sync getters read the page-injected `window._wails.environment`, which can
+  // be empty if the injection hasn't landed yet — keep them only as a fallback.
+  const syncIsMac = System.IsMac();
+  const syncIsWindows = System.IsWindows();
+
+  // The async Environment() call round-trips to the Go backend and is the
+  // authoritative source for OS.
+  let env: Awaited<ReturnType<typeof System.Environment>> | null = null;
+  try {
+    env = await System.Environment();
+  } catch (e) {
+    console.error("[platform] System.Environment() threw:", e);
   }
+
+  // Prefer the async env.OS; fall back to the sync getters if it's missing.
+  const os = (env?.OS ?? "").toLowerCase();
   cached = {
-    isWindows11,
-    isMacOS,
-    isOtherOS: !isMacOS && !isWindows11,
+    isWindows: os ? os === "windows" : syncIsWindows,
+    isMacOS: os ? os === "darwin" : syncIsMac,
   };
 }
 
@@ -38,7 +39,5 @@ function get(): Platform {
   return cached;
 }
 
-export const getPlatform = (): Platform => get();
-export const isWindows11 = (): boolean => get().isWindows11;
+export const isWindows = (): boolean => get().isWindows;
 export const isMacOS = (): boolean => get().isMacOS;
-export const isOtherOS = (): boolean => get().isOtherOS;

client/ui/frontend/src/modules/main/MainHeader.tsx

@@ -24,6 +24,7 @@ import { useClientVersion } from "@/contexts/ClientVersionContext";
 import { cn } from "@/lib/cn";
 import { formatShortcut, useKeyboardShortcut } from "@/hooks/useKeyboardShortcut";
 import { useViewMode, type ViewMode } from "@/contexts/ViewModeContext";
+import {isWindows} from "@/lib/platform.ts";
 
 const SETTINGS_SHORTCUT = { key: ",", cmd: true } as const;
 
@@ -146,7 +147,10 @@ export const MainHeader = () => {
                 "flex items-center h-12 top-2.5",
             )}
         >
-            <div className={"grid grid-cols-3 items-center w-[380px] shrink-0"}>
+            {/* Windows gets a narrower width to compensate for the OS window frame/border that Wails
+                counts differently than macOS, so the visible content area lines up on both platforms.
+                See https://github.com/wailsapp/wails/issues/3260 */}
+            <div className={cn("grid grid-cols-3 items-center shrink-0", isWindows() ? "w-[364px]" : "w-[380px]")}>
                 <div />
                 <div className={"flex justify-center ml-4"}>{profileSlot}</div>
                 <div />

client/ui/frontend/src/modules/main/MainPage.tsx

@@ -13,6 +13,7 @@ import { ExitNodes } from "@/modules/main/advanced/exit-nodes/ExitNodes";
 import { NetworksProvider } from "@/contexts/NetworksContext";
 import { PeerDetailProvider, usePeerDetail } from "@/contexts/PeerDetailContext";
 import { PeerDetailPanel } from "@/modules/main/advanced/peers/PeerDetailPanel";
+import {isWindows} from "@/lib/platform.ts";
 
 export const MainPage = () => {
     return (
@@ -33,7 +34,10 @@ const MainBody = () => {
 
     return (
         <div className={"wails-draggable flex flex-1 min-h-0"}>
-            <div className={"flex flex-col items-center shrink-0 w-[380px]"}>
+            {/* Windows gets a narrower width to compensate for the OS window frame/border that Wails
+                counts differently than macOS, so the visible content area lines up on both platforms.
+                See https://github.com/wailsapp/wails/issues/3260 */}
+            <div className={cn("flex flex-col items-center shrink-0 ", isWindows() ? "w-[364px]" : "w-[380px]")}>
                 <MainConnectionStatusSwitch />
             </div>
             {isAdvanced && (