update window width and dialogs top padding on macos

client/ui/frontend/src/components/dialog/ConfirmDialog.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, forwardRef } from "react";
-import {cn} from "@/lib/cn.ts";
+import { cn } from "@/lib/cn.ts";
+import { isMacOS } from "@/lib/platform.ts";
 
 // ConfirmDialog is the shared layout wrapper used by dialog-style window
 // surfaces (SessionExpired, SessionAboutToExpire, …). Purely a layout
@@ -14,21 +15,21 @@ type ConfirmDialogProps = {
     children: ReactNode;
 };
 
-export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
-    function ConfirmDialog({ children }, ref) {
-        return (
+export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(function ConfirmDialog(
+    { children },
+    ref,
+) {
+    return (
+        <div className={"wails-draggable select-none flex flex-col items-center"}>
             <div
-                className={
-                    "wails-draggable select-none flex flex-col items-center"
-                }
+                ref={ref}
+                className={cn(
+                    "flex flex-col items-center gap-5 text-center px-8 py-6",
+                    isMacOS() && "pt-10",
+                )}
             >
-                <div
-                    ref={ref}
-                    className={cn("flex flex-col items-center gap-5 text-center px-8 py-6")}
-                >
-                    {children}
-                </div>
+                {children}
             </div>
-        );
-    },
-);
+        </div>
+    );
+});

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

@@ -146,7 +146,7 @@ export const MainHeader = () => {
                 "flex items-center h-12 top-2.5",
             )}
         >
-            <div className={"grid grid-cols-3 items-center w-[364px] shrink-0"}>
+            <div className={"grid grid-cols-3 items-center w-[380px] shrink-0"}>
                 <div />
                 <div className={"flex justify-center ml-4"}>{profileSlot}</div>
                 <div />

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

@@ -11,10 +11,7 @@ import { Peers } from "@/modules/main/advanced/peers/Peers";
 import { Networks } from "@/modules/main/advanced/networks/Networks";
 import { ExitNodes } from "@/modules/main/advanced/exit-nodes/ExitNodes";
 import { NetworksProvider } from "@/contexts/NetworksContext";
-import {
-    PeerDetailProvider,
-    usePeerDetail,
-} from "@/contexts/PeerDetailContext";
+import { PeerDetailProvider, usePeerDetail } from "@/contexts/PeerDetailContext";
 import { PeerDetailPanel } from "@/modules/main/advanced/peers/PeerDetailPanel";
 
 export const MainPage = () => {
@@ -35,10 +32,8 @@ const MainBody = () => {
     const isAdvanced = viewMode === "advanced";
 
     return (
-        <div className={"wails-draggable flex flex-1 min-h-0 gap-4r"}>
-            <div
-                className={"flex flex-col items-center shrink-0 w-[364px]"}
-            >
+        <div className={"wails-draggable flex flex-1 min-h-0"}>
+            <div className={"flex flex-col items-center shrink-0 w-[380px]"}>
                 <MainConnectionStatusSwitch />
             </div>
             {isAdvanced && (
@@ -57,10 +52,7 @@ const AdvancedAppRightPanel = () => {
     const isConnected = status?.status === "Connected";
 
     return (
-        <AppRightPanel
-            overlay={<PeerDetailPanel />}
-            overlayOpen={selected !== null}
-        >
+        <AppRightPanel overlay={<PeerDetailPanel />} overlayOpen={selected !== null}>
             <div
                 className={cn(
                     "flex-1 min-h-0 min-w-0 flex flex-col",
@@ -76,11 +68,7 @@ const AdvancedAppRightPanel = () => {
                 </div>
             </div>
             {!isConnected && (
-                <div
-                    className={
-                        "absolute inset-0 z-20 flex pointer-events-auto bg-nb-gray-940"
-                    }
-                >
+                <div className={"absolute inset-0 z-20 flex pointer-events-auto bg-nb-gray-940"}>
                     <NotConnectedState />
                 </div>
             )}