WebPWA: fix popout & fullscreen styling (#4536)

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>

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_"] {
+    [data-fullscreen] > [class*="bar_"] {
+        [class*="trailing_"],
+        [class*="leading"] {
             display: none;
         }
     }
+}