Bundle web-ui v3.1.0a7

gns3server/static/web-ui/assets/console-ui.css

@@ -0,0 +1,26 @@
+/* Shared local typography for standalone console chrome. Remote framebuffer
+   pixels and terminal font preferences remain owned by the remote session. */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/roboto/roboto-latin-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/roboto/roboto-latin-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('fonts/roboto/roboto-latin-700.woff2') format('woff2');
+}
+:root {
+  --gns3-font-code: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+}

gns3server/static/web-ui/assets/vnc-console/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="x-ua-compatible" content="IE=edge" />
     <title>VNC Console</title>
+    <link rel="stylesheet" href="../console-ui.css" />
     <style>
       * {
         margin: 0;
@@ -15,7 +16,7 @@
       body {
         overflow: hidden;
         background: #000;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        font-family: 'Roboto', sans-serif;
       }
 
       #vnc-container {
@@ -456,7 +457,7 @@
         color: #fff;
         font-size: 32px;
         font-weight: bold;
-        font-family: monospace;
+        font-family: var(--gns3-font-code);
         display: none;
         align-items: center;
         gap: 8px;
@@ -550,7 +551,9 @@
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-        min-width: 400px;
+        width: min(400px, calc(100vw - 32px));
+        max-height: calc(100dvh - 32px);
+        overflow: auto;
         z-index: 1002;
         display: none;
       }
@@ -569,7 +572,7 @@
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 4px;
         padding: 12px;
-        font-family: monospace;
+        font-family: var(--gns3-font-code);
         font-size: 13px;
         resize: vertical;
         margin-bottom: 16px;
@@ -616,6 +619,34 @@
         z-index: 1001;
         display: none;
       }
+      button,
+      input,
+      select {
+        font-family: inherit;
+      }
+
+      button:focus-visible,
+      input:focus-visible,
+      select:focus-visible,
+      textarea:focus-visible {
+        outline: 2px solid #90caf9;
+        outline-offset: 2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #vnc-container,
+        #status-bar,
+        #vnc-toolbar,
+        button,
+        .dropdown-menu {
+          transition: none;
+        }
+        .dropdown-menu.show,
+        #vnc-toolbar button.recording,
+        #recording-indicator .recording-dot {
+          animation: none;
+        }
+      }
     </style>
   </head>
   <body>

gns3server/static/web-ui/assets/xpra-html5/js/Menu.js

@@ -42,6 +42,27 @@ SOFTWARE.
   const MENU_CLASS_NAME = "Menu";
   const VISIBLE_CLASS_NAME = "-visible";
 
+  function positionToolbarMenu(ul) {
+    if (!ul.closest("#menu_list")) return;
+
+    // Measure without the opening animation or a previous edge correction.
+    ul.style.left = "";
+    ul.style.right = "";
+    const viewportWidth = document.documentElement.clientWidth;
+    let bounds = ul.getBoundingClientRect();
+    if (bounds.right > viewportWidth && ul.id !== "menu_list") {
+      ul.style.left = "auto";
+      ul.style.right = "100%";
+      bounds = ul.getBoundingClientRect();
+    }
+
+    const shift = Math.max(0, -bounds.left) + Math.min(0, viewportWidth - bounds.right);
+    if (shift) {
+      ul.style.left = `${ul.offsetLeft + shift}px`;
+      ul.style.right = "auto";
+    }
+  }
+
   function showMenu() {
     const menu = this;
     const ul = $("ul", menu)[0];
@@ -61,8 +82,10 @@ SOFTWARE.
     }
 
     menu.classList.add(ACTIVE_CLASS_NAME);
-    ul.classList.add(ANIMATING_CLASS_NAME);
+    ul.classList.remove(ANIMATING_CLASS_NAME);
     ul.classList.add(VISIBLE_CLASS_NAME);
+    positionToolbarMenu(ul);
+    ul.classList.add(ANIMATING_CLASS_NAME);
     setTimeout(function() {
       ul.classList.remove(ANIMATING_CLASS_NAME);
     }, 25);