fix: updated UI to macosx conventions

src/renderer/components/WindowTitleBar/WindowTitleBar.css

@@ -23,6 +23,10 @@
   z-index: 2;
 }
 
+.window-titlebar.is-mac .window-titlebar-menu-bar {
+  margin-left: max(var(--bds-titlebar-macos-left-inset, 78px), calc(6px + var(--bds-titlebar-overlay-left, 0px)));
+}
+
 .window-titlebar-menu-button {
   height: 24px;
   border: none;

src/renderer/components/WindowTitleBar/WindowTitleBar.tsx

@@ -133,6 +133,83 @@ export const WindowTitleBar: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isMac) {
+      return;
+    }
+
+    const rootStyle = document.documentElement.style;
+    let isDisposed = false;
+    let resolutionQuery: MediaQueryList | null = null;
+
+    const syncMacInset = async () => {
+      const metrics = await window.electronAPI?.app?.getTitleBarMetrics?.();
+      if (isDisposed) {
+        return;
+      }
+
+      if (metrics && Number.isFinite(metrics.macosLeftInset)) {
+        rootStyle.setProperty('--bds-titlebar-macos-left-inset', `${Math.max(0, Math.round(metrics.macosLeftInset))}px`);
+      }
+    };
+
+    const bindResolutionListener = () => {
+      if (typeof window.matchMedia !== 'function') {
+        return;
+      }
+
+      if (resolutionQuery && typeof resolutionQuery.removeEventListener === 'function') {
+        resolutionQuery.removeEventListener('change', onResolutionChange);
+      }
+
+      resolutionQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof resolutionQuery.addEventListener === 'function') {
+        resolutionQuery.addEventListener('change', onResolutionChange);
+      }
+    };
+
+    const onResolutionChange = () => {
+      void syncMacInset();
+      bindResolutionListener();
+    };
+
+    const onResize = () => {
+      void syncMacInset();
+    };
+
+    const onVisibilityChange = () => {
+      if (!document.hidden) {
+        void syncMacInset();
+      }
+    };
+
+    const canListenToWindowEvents = typeof window.addEventListener === 'function';
+    const canListenToDocumentEvents = typeof document.addEventListener === 'function';
+
+    void syncMacInset();
+    bindResolutionListener();
+    if (canListenToWindowEvents) {
+      window.addEventListener('resize', onResize);
+    }
+    if (canListenToDocumentEvents) {
+      document.addEventListener('visibilitychange', onVisibilityChange);
+    }
+
+    return () => {
+      isDisposed = true;
+      if (canListenToWindowEvents && typeof window.removeEventListener === 'function') {
+        window.removeEventListener('resize', onResize);
+      }
+      if (canListenToDocumentEvents && typeof document.removeEventListener === 'function') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+
+      if (resolutionQuery && typeof resolutionQuery.removeEventListener === 'function') {
+        resolutionQuery.removeEventListener('change', onResolutionChange);
+      }
+    };
+  }, [isMac]);
+
   useEffect(() => {
     const updateTitle = () => {
       setWindowTitle(document.title || 'Blogging Desktop Server');
@@ -383,7 +460,7 @@ export const WindowTitleBar: React.FC = () => {
   const activeMenu = openMenu ? visibleMenuGroups.find(group => group.label === openMenu.label) : null;
 
   return (
-    <div className="window-titlebar" data-testid="window-titlebar" ref={menuRootRef}>
+    <div className={`window-titlebar${isMac ? ' is-mac' : ''}`} data-testid="window-titlebar" ref={menuRootRef}>
       <div className="window-titlebar-menu-bar" data-testid="window-titlebar-menu-bar">
         {visibleMenuGroups.map(group => (
           <button