From ac1902c18bbde940f8197c8da27c8bd703fb93d4 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 30 May 2024 12:33:59 -0700
Subject: [PATCH] Ignore stoplights when centering settings title

---
 src-web/components/HeaderSize.tsx        | 11 +++++++++--
 src-web/components/Settings/Settings.tsx |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src-web/components/HeaderSize.tsx b/src-web/components/HeaderSize.tsx
index 3aa16867..7e9445c7 100644
--- a/src-web/components/HeaderSize.tsx
+++ b/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
diff --git a/src-web/components/Settings/Settings.tsx b/src-web/components/Settings/Settings.tsx
index 8d45f7a8..d24beae7 100644
--- a/src-web/components/Settings/Settings.tsx
+++ b/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" />