fix(titlebar): style for overlay mode

alex8088 · Aug 11, 2024 · 5ce8780 · 5ce8780
1 parent 89d7e53
commit 5ce8780
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/packages/titlebar/src/renderer.ts b/packages/titlebar/src/renderer.ts
@@ -148,6 +148,15 @@ const SHADOW_ROOT_CSS = `
 }
 `
 
+const OVERLAY_HOST_CSS = `
+:host {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10000;
+}
+`
+
 export default class TitleBar extends HTMLElement {
   constructor() {
     super()
@@ -156,14 +165,14 @@ export default class TitleBar extends HTMLElement {
   connectedCallback(): void {
     const shadow = this.attachShadow({ mode: 'open' })
 
+    const overlay = this.hasAttribute('overlay')
+
     const style = document.createElement('style')
-    style.textContent = SHADOW_ROOT_CSS
+    style.textContent = SHADOW_ROOT_CSS + (overlay ? OVERLAY_HOST_CSS : '')
     shadow.appendChild(style)
 
     const isMacintosh = core.process.platform === 'darwin'
 
-    const overlay = this.hasAttribute('overlay')
-
     if (!overlay) {
       const el = document.createElement('div')
       el.classList.add('titlebar__drag-region')