Ignore stoplights when centering settings title

src-web/components/HeaderSize.tsx

@@ -6,12 +6,19 @@ import { useOsInfo } from '../hooks/useOsInfo';
 interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   size: 'md' | 'lg';
+  ignoreStoplights?: boolean;
 }
 
-export function HeaderSize({ className, style, size, ...props }: HeaderSizeProps) {
+export function HeaderSize({
+  className,
+  style,
+  size,
+  ignoreStoplights,
+  ...props
+}: HeaderSizeProps) {
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
-  const stoplightsVisible = platform?.osType === 'macos' && !fullscreen;
+  const stoplightsVisible = platform?.osType === 'macos' && !fullscreen && !ignoreStoplights;
   return (
     <div
       data-tauri-drag-region

src-web/components/Settings/Settings.tsx

@@ -28,13 +28,14 @@ export const Settings = () => {
     <>
       <HeaderSize
         data-tauri-drag-region
+        ignoreStoplights
         size="md"
         className="x-theme-appHeader bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
       >
         <HStack
           space={2}
           justifyContent="center"
-          className="w-full h-full grid grid-cols-[1fr_auto]"
+          className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
         >
           <div className="text-center">Settings</div>
           <WindowControls className="ml-auto" />