update ui for win11

client/ui/frontend/src/components/VerticalTabs.tsx

@@ -11,7 +11,7 @@ const Root = forwardRef<
         <Tabs.Root
             ref={ref}
             orientation={"vertical"}
-            className={cn("flex flex-1 min-h-0 gap-4", className)}
+            className={cn("flex flex-1 min-h-0", className)}
             {...props}
         />
     );
@@ -22,7 +22,7 @@ const List = forwardRef<HTMLDivElement, Tabs.TabsListProps>(
         return (
             <Tabs.List
                 ref={ref}
-                className={cn("w-full flex flex-col gap-1", className)}
+                className={cn("w-full flex flex-col gap-1 p-4 pr-0", className)}
                 {...props}
             />
         );

client/ui/frontend/src/layouts/AppRightPanel.tsx

@@ -20,7 +20,7 @@ export const AppRightPanel = ({ children, overlay, overlayOpen = false }: Props)
     return (
         <div
             className={cn(
-                "wails-no-draggable relative",
+                "wails-no-draggable relative m-4",
                 "bg-nb-gray-940 border border-nb-gray-920",
                 "flex-1 min-h-0 min-w-0 flex flex-col rounded-xl rounded-br-2xl overflow-hidden",
             )}

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

@@ -143,10 +143,10 @@ export const MainHeader = () => {
         <div
             className={cn(
                 "shrink-0 cursor-default wails-draggable relative",
-                "flex items-center h-12 px-3 top-2.5",
+                "flex items-center h-12 top-2.5",
             )}
         >
-            <div className={"grid grid-cols-3 items-center w-[356px] shrink-0"}>
+            <div className={"grid grid-cols-3 items-center w-[364px] shrink-0"}>
                 <div />
                 <div className={"flex justify-center ml-4"}>{profileSlot}</div>
                 <div />

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

@@ -35,9 +35,9 @@ const MainBody = () => {
     const isAdvanced = viewMode === "advanced";
 
     return (
-        <div className={"wails-draggable flex flex-1 min-h-0 p-4 gap-4"}>
+        <div className={"wails-draggable flex flex-1 min-h-0 gap-4r"}>
             <div
-                className={"flex flex-col items-center shrink-0 w-[348px]"}
+                className={"flex flex-col items-center shrink-0 w-[364px]"}
             >
                 <MainConnectionStatusSwitch />
             </div>

client/ui/frontend/src/modules/settings/SettingsPage.tsx

@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 import { Events } from "@wailsio/runtime";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { cn } from "@/lib/cn";
+import { isMacOS } from "@/lib/platform";
 import { AppRightPanel } from "@/layouts/AppRightPanel.tsx";
 import { VerticalTabs } from "@/components/VerticalTabs.tsx";
 import { SettingsNavigation } from "@/modules/settings/SettingsNavigation.tsx";
@@ -50,15 +51,18 @@ export const SettingsPage = () => {
 
     return (
         <>
-            <div
-                className={
-                    "wails-draggable cursor-default select-none h-12 shrink-0"
-                }
-            />
+            {isMacOS() ? (
+                <div
+                    className={
+                        "wails-draggable cursor-default select-none h-12 shrink-0"
+                    }
+                />
+            ) : (
+                <div className={"h-px shrink-0 bg-nb-gray-920/0"} />
+            )}
             <VerticalTabs
                 value={active}
                 onValueChange={setActive}
-                className={"p-4"}
             >
                 <SettingsNavigation />
                 <AppRightPanel>