feat: render Settings in a windowed dialog

- Open Settings as a centered windowed dialog on desktop with a blurred backdrop
- Update SettingsView to support windowed mode and adjust Mac titlebar padding for windowed use
- Export SettingsWindow and switch MainLayout to use it instead of full-screen overlay

packages/ui/src/components/views/SettingsView.tsx

@@ -52,15 +52,17 @@ const SETTINGS_SIDEBAR_MAX_WIDTH = 500;
 const SETTINGS_SIDEBAR_DEFAULT_WIDTH = 264;
 
 // Width threshold for hiding tab labels (show icons only)
-const TAB_LABELS_MIN_WIDTH = 940;
+const TAB_LABELS_MIN_WIDTH = 1024;
 
 interface SettingsViewProps {
   onClose?: () => void;
   /** Force mobile layout regardless of device detection */
   forceMobile?: boolean;
+  /** Rendered inside a window/dialog (skip traffic light padding) */
+  isWindowed?: boolean;
 }
 
-export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile }) => {
+export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile, isWindowed }) => {
   const deviceInfo = useDeviceInfo();
   const isMobile = forceMobile ?? deviceInfo.isMobile;
 
@@ -342,13 +344,16 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
   // Keyboard shortcut display based on platform
   const shortcutKey = getModifierLabel();
 
-  // Desktop padding for Mac titlebar area
+  // Desktop padding for Mac titlebar area (only when full-screen, not windowed)
   const desktopPaddingClass = React.useMemo(() => {
+    if (isWindowed) {
+      return 'pl-1.5'; // Balanced padding for windowed mode
+    }
     if (isDesktopApp && isMacPlatform) {
       return 'pl-[5.75rem]'; // Space for traffic lights
     }
     return '';
-  }, [isDesktopApp, isMacPlatform]);
+  }, [isDesktopApp, isMacPlatform, isWindowed]);
 
 
   return (

packages/ui/src/components/views/SettingsWindow.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib/utils';
+import { SettingsView } from './SettingsView';
+
+interface SettingsWindowProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Settings rendered as a centered window with blurred backdrop.
+ * Used for desktop and web (non-mobile) environments.
+ */
+export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChange }) => {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
+        />
+        <DialogPrimitive.Content
+          className={cn(
+            'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+            'w-[90vw] max-w-[1200px] h-[85vh] max-h-[900px]',
+            'rounded-xl border shadow-2xl overflow-hidden',
+            'bg-background'
+          )}
+        >
+          <SettingsView onClose={() => onOpenChange(false)} isWindowed />
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+};

packages/ui/src/components/views/index.ts

@@ -5,3 +5,4 @@ export { DiffView, useDiffFileCount } from './DiffView';
 export { TerminalView } from './TerminalView';
 export { FilesView } from './FilesView';
 export { SettingsView } from './SettingsView';
+export { SettingsWindow } from './SettingsWindow';