From d631e17b81f4a1ac22733f2bf98573f13c4f0115 Mon Sep 17 00:00:00 2001
From: Cas_ <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 20 Aug 2026 19:19:09 +0200
Subject: [PATCH] WebPWA: fix popout & fullscreen styling (#4536)

---
 browser/monacoWin.html                | 25 ++++++++++++++++++++++++-
 src/plugins/webPWA.browser/styles.css | 23 +++++++++++++++++++----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/browser/monacoWin.html b/browser/monacoWin.html
index 12523d455..72ba94e78 100644
--- a/browser/monacoWin.html
+++ b/browser/monacoWin.html
@@ -7,7 +7,6 @@
             html,
             body,
             #container {
-                position: absolute;
                 left: 0;
                 top: 0;
                 width: 100%;
@@ -15,11 +14,35 @@
                 margin: 0;
                 padding: 0;
                 overflow: hidden;
+                background-color: #1e1e1e;
+            }
+
+            body {
+                display: flex;
+                flex-direction: column;
+            }
+
+            #title-bar {
+                display: none;
+            }
+
+            @media all and (display-mode: window-controls-overlay) {
+                #title-bar {
+                    display: flex;
+                    align-items: center;
+                    padding-left: 14px;
+                    font-family: Consolas, Courier New, monospace;
+                    line-height: 1;
+                    height: env(titlebar-area-height, 0px);
+                    app-region: drag;
+                    color: white;
+                }
             }
         </style>
     </head>
 
     <body>
+        <div id="title-bar">Vencord QuickCSS Editor</div>
         <div id="container"></div>
 
         <script>
diff --git a/src/plugins/webPWA.browser/styles.css b/src/plugins/webPWA.browser/styles.css
index 25cf2a4ce..6627e94a2 100644
--- a/src/plugins/webPWA.browser/styles.css
+++ b/src/plugins/webPWA.browser/styles.css
@@ -3,21 +3,36 @@
     color-scheme: only light;
 }
 
-@media all and not (display-mode: browser) {
+@media all and not ((display-mode: browser) or (display-mode: fullscreen)) {
     :root {
         /* force title bar to be same as WCO bar height, regardless of zoom, device pixel ratio or OS, is only set when WCO is defined, otherwise sets to 0 */
         --custom-app-top-bar-height: env(titlebar-area-height, 0px) !important;
     }
 
     /* position trailing titlebar elements alongside WCO */
-    [class*="bar_"] [class*="trailing_"] {
+    [data-fullscreen] > [class*="bar_"] [class*="trailing_"] {
         padding-right: calc(100vw - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px));
     }
+
+    /* popout windows like screenshare popout, these properties don't work outside WCO so this is safe */
+    [data-popout-root="true"] {
+        [class*="headerWrapper_"] {
+            app-region: drag;
+
+            /* position trailing toolbar elements alongside WCO */
+            [class*="toolbar_"] {
+                padding-right: calc(100vw - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px));
+            }
+        }
+    }
 }
 
 /* force hide trailing icons when standalone so there's no ugly pixel overflow */
 @media all and (display-mode: standalone) {
-    [class*="bar_"] [class*="trailing_"] {
-        display: none;
+    [data-fullscreen] > [class*="bar_"] {
+        [class*="trailing_"],
+        [class*="leading"] {
+            display: none;
+        }
     }
 }
\ No newline at end of file