diff --git a/desktop/src/main.ts b/desktop/src/main.ts
index 57bfce8c1c..d4a7e2214c 100644
--- a/desktop/src/main.ts
+++ b/desktop/src/main.ts
@@ -351,11 +351,15 @@ const createMainWindow = () => {
         // [Note: Customize the desktop title bar]
         //
         // 1. Remove the default title bar.
-        // 2. On Linux and Windows, reintroduce the title bar controls (macOS
-        //    always does it).
-        // 3. Show a custom title bar in the renderer using `app-region: drag`
-        //    to allow dragging the window by the title bar, and using the
-        //    Window Controls Overlay CSS variables to determine its dimensions.
+        // 2. Reintroduce the title bar controls.
+        // 3. Show a custom title bar in the renderer.
+        //
+        // For step 3, we use `app-region: drag` to allow dragging the window by
+        // the title bar, and use the Window Controls Overlay CSS environment
+        // variables to determine its dimensions. Note that these overlay CSS
+        // environment vars are only available when titleBarOverlay is true, so
+        // unlike the tutorial which enables it only for Windows and Linux, we
+        // do it (Step 2) unconditionally (i.e., on macOS too).
         //
         // https://www.electronjs.org/docs/latest/tutorial/custom-title-bar#create-a-custom-title-bar
         titleBarStyle: "hidden",
diff --git a/web/apps/photos/src/pages/_app.tsx b/web/apps/photos/src/pages/_app.tsx
index 32a6bf53b1..cb3ef776f9 100644
--- a/web/apps/photos/src/pages/_app.tsx
+++ b/web/apps/photos/src/pages/_app.tsx
@@ -212,8 +212,7 @@ const redirectToFamilyPortal = () =>
 // See: [Note: Customize the desktop title bar]
 const WindowTitlebar = styled("div")`
     width: 100%;
-    --fallback-title-bar-height: 30px;
-    height: env(titlebar-area-height, var(--fallback-title-bar-height));
+    height: env(titlebar-area-height, 30px /* fallback */);
     display: flex;
     /* Allow using the titlebar to drag the window */
     app-region: drag;