From ebc45ca687a9bba5108bad01646e3357a565c003 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 16 Sep 2024 06:20:50 -0700
Subject: [PATCH] Account for zoom for macOS stoplight padding

---
 src-web/components/HeaderSize.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src-web/components/HeaderSize.tsx b/src-web/components/HeaderSize.tsx
index 070ab564..5445b87e 100644
--- a/src-web/components/HeaderSize.tsx
+++ b/src-web/components/HeaderSize.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { useIsFullscreen } from '../hooks/useIsFullscreen';
 import { useOsInfo } from '../hooks/useOsInfo';
+import { useSettings } from '../hooks/useSettings';
 
 interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
@@ -16,17 +17,22 @@ export function HeaderSize({
   ignoreStoplights,
   ...props
 }: HeaderSizeProps) {
+  const settings = useSettings();
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
   const stoplightsVisible = platform?.osType === 'macos' && !fullscreen && !ignoreStoplights;
   return (
     <div
       data-tauri-drag-region
-      style={style}
+      style={{
+        ...style,
+        // Add padding for macOS stoplights, but keep it the same width (account for the interface scale)
+        paddingLeft: stoplightsVisible ? 72 / settings.interfaceScale : undefined,
+      }}
       className={classNames(
         className,
         'pt-[1px] w-full border-b border-border-subtle min-w-0',
-        stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
+        stoplightsVisible ? 'pr-1' : 'pl-1',
         size === 'md' && 'h-[27px]',
         size === 'lg' && 'h-[38px]',
       )}