refactor(remote): adjust monitors menu display logic

- Updated CSS to ensure the monitors menu displays as a flex container only when open, improving layout consistency.
- Removed unnecessary JavaScript that displayed the monitors button by default, enhancing code clarity and functionality.

web-nodejs/public/css/remote.css

@@ -866,8 +866,6 @@
 
 /* ---- Monitors & Virtual Displays ---- */
 #monitors-menu.toolbar-dropdown-menu {
-    display: flex;
-    flex-direction: column;
     min-width: 240px;
     max-width: min(300px, calc(100vw - 24px));
     max-height: min(75vh, calc(100dvh - 120px));
@@ -875,6 +873,11 @@
     padding: 4px;
 }
 
+#monitors-menu.toolbar-dropdown-menu.open {
+    display: flex;
+    flex-direction: column;
+}
+
 #monitors-menu > .dropdown-label {
     flex-shrink: 0;
 }

web-nodejs/public/js/remote.js

@@ -1479,9 +1479,6 @@
         // display support.
         if (monitors.length < 2 && !(vd && vd.supported)) return;
 
-        const btn = document.getElementById('btn-monitors');
-        if (btn) btn.style.display = '';
-
         const label = menu.querySelector('.dropdown-label');
         menu.innerHTML = '';
         if (label) menu.appendChild(label);