From efe94b3a3b8d60103219cd140dc3a46bbb22c51f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 4 Apr 2026 13:25:35 -0700
Subject: [PATCH] inset the windowbar

---
 .../layouts/default-layout.module.css         | 16 ++++++++---
 .../mobile-layout/mobile-layout.module.css    | 10 +++++--
 src/renderer/layouts/window-bar.module.css    | 22 +++++++++++----
 src/renderer/layouts/window-bar.tsx           | 28 ++++++++++---------
 .../themes/glassy-dark/glassy_overrides.css   |  6 ++--
 5 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/renderer/layouts/default-layout.module.css b/src/renderer/layouts/default-layout.module.css
index 8a4dd07a8..14aa92727 100644
--- a/src/renderer/layouts/default-layout.module.css
+++ b/src/renderer/layouts/default-layout.module.css
@@ -16,14 +16,22 @@
 
 .windows {
     grid-template-rows:
-        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100vh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
     grid-template-rows:
-        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100dvh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
 }
 
 .macos {
     grid-template-rows:
-        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100vh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
     grid-template-rows:
-        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100dvh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
 }
diff --git a/src/renderer/layouts/mobile-layout/mobile-layout.module.css b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
index 7cc4df9ca..04936b230 100644
--- a/src/renderer/layouts/mobile-layout/mobile-layout.module.css
+++ b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
@@ -21,15 +21,19 @@
 .windows,
 .macos {
     grid-template-rows:
-        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100vh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
     grid-template-rows:
-        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+        calc(30px + var(--theme-spacing-md))
+        calc(100dvh - 120px - 2 * var(--theme-spacing-md))
+        calc(90px + var(--theme-spacing-md));
 }
 
 .drawer-button {
     position: absolute;
     bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
-    left: 0.75rem;
+    left: var(--theme-spacing-md);
     z-index: 100;
     background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent);
     border: 1px solid var(--theme-colors-border);
diff --git a/src/renderer/layouts/window-bar.module.css b/src/renderer/layouts/window-bar.module.css
index 4f690b64b..ab1f54ac6 100644
--- a/src/renderer/layouts/window-bar.module.css
+++ b/src/renderer/layouts/window-bar.module.css
@@ -1,6 +1,20 @@
-.window-bar {
+.wrapper {
+    box-sizing: border-box;
+    display: flex;
     grid-area: window-bar;
-    height: 30px;
+    height: 100%;
+    padding: var(--theme-spacing-md) var(--theme-spacing-md) 0;
+    background: var(--theme-colors-background);
+}
+
+.bar {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--theme-colors-background);
+    border-radius: var(--theme-radius-lg);
 }
 
 .windows-container {
@@ -9,8 +23,6 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    background: var(--theme-colors-background);
-    border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
     -webkit-app-region: drag;
 }
 
@@ -95,8 +107,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    background: var(--theme-colors-background);
-    border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
     -webkit-app-region: drag;
 }
 
diff --git a/src/renderer/layouts/window-bar.tsx b/src/renderer/layouts/window-bar.tsx
index 3e869122e..ae534649f 100644
--- a/src/renderer/layouts/window-bar.tsx
+++ b/src/renderer/layouts/window-bar.tsx
@@ -205,19 +205,21 @@ export const WindowBar = () => {
     }
 
     return (
-        <div className={styles.windowBar}>
-            {windowBarStyle === Platform.WINDOWS && (
-                <WindowsControls
-                    controls={{ handleClose, handleMaximize, handleMinimize }}
-                    title={title}
-                />
-            )}
-            {windowBarStyle === Platform.MACOS && (
-                <MacOsControls
-                    controls={{ handleClose, handleMaximize, handleMinimize }}
-                    title={title}
-                />
-            )}
+        <div className={styles.wrapper}>
+            <div className={styles.bar}>
+                {windowBarStyle === Platform.WINDOWS && (
+                    <WindowsControls
+                        controls={{ handleClose, handleMaximize, handleMinimize }}
+                        title={title}
+                    />
+                )}
+                {windowBarStyle === Platform.MACOS && (
+                    <MacOsControls
+                        controls={{ handleClose, handleMaximize, handleMinimize }}
+                        title={title}
+                    />
+                )}
+            </div>
         </div>
     );
 };
diff --git a/src/shared/themes/glassy-dark/glassy_overrides.css b/src/shared/themes/glassy-dark/glassy_overrides.css
index 9173b1e30..88ac8df1a 100644
--- a/src/shared/themes/glassy-dark/glassy_overrides.css
+++ b/src/shared/themes/glassy-dark/glassy_overrides.css
@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-.fs-player-bar-module-container {
+.fs-player-bar-module-bar {
     background: rgb(0 0 0 / 40%) !important;
     backdrop-filter: blur(2rem);
 }
@@ -125,8 +125,8 @@ table {
     height: 100vh;
 }
 
-:has(.fs-window-bar-module-window-bar) .fs-main-content-module-main-content-container {
-    height: calc(100vh - 30px);
+:has(.fs-window-bar-module-wrapper) .fs-main-content-module-main-content-container {
+    height: calc(100vh - 30px - var(--theme-spacing-md));
 }
 
 .mantine-Tabs-root {