apply different window width on windows

This commit is contained in:
Eduard Gert
2026-06-01 11:07:33 +02:00
parent 7538a9a133
commit 710d5c6182
3 changed files with 30 additions and 23 deletions
@@ -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 />
@@ -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 && (