Fixed Macro Keyboard Layout Issues.

Data/Server/WebUI/src/Borealis.css

@@ -175,46 +175,72 @@ label {
 /* REACT-SIMPLE-KEYBOARD                   */
 /* ======================================= */
 
-/* keyboard-dark-theme.css */
-
-/* react-simple-keyboard dark theming */
-.hg-theme-dark {
-    background-color: #1e1e1e;
-    border: 1px solid #444;
+/* Make the keyboard max width like the demo */
+.simple-keyboard {
+  max-width: 950px;
+  margin: 0 auto;
+  background: #181c23;
+  border-radius: 8px;
+  padding: 24px 24px 30px 24px;
+  box-shadow: 0 2px 24px 0 #000a;
 }
 
-.hg-button {
-    background: #2c2c2c;
-    color: #ccc;
-    border: 1px solid #444;
-    font-size: 11px;
+/* Set dark background and color for the keyboard and its keys */
+.simple-keyboard .hg-button {
+  background: #23262e;
+  color: #b0d0ff;
+  border: 1px solid #333;
+  font-size: 1.1em;
+  min-width: 48px;
+  min-height: 48px;
+  margin: 5px;
+  border-radius: 6px;
+  transition: background 0.1s, color 0.1s;
+  padding-top: 6px;
+  padding-left: 8px;
 }
 
-.hg-button:hover {
+.simple-keyboard .hg-button[data-skbtn="space"] {
+  min-width: 380px;
+}
+
+.simple-keyboard .hg-button[data-skbtn="tab"],
+.simple-keyboard .hg-button[data-skbtn="caps"],
+.simple-keyboard .hg-button[data-skbtn="shift"],
+.simple-keyboard .hg-button[data-skbtn="enter"],
+.simple-keyboard .hg-button[data-skbtn="bksp"] {
+  min-width: 82px;
+}
+
+.simple-keyboard .hg-button:hover {
   background: #58a6ff;
   color: #000;
   border-color: #58a6ff;
 }
 
-.borealis-keyboard .hg-button.hg-standardBtn {
-    border-radius: 3px;
-}
-
-/* Force rows to appear horizontally */
-.simple-keyboard-main .hg-row {
+/* Make sure rows aren't squashed */
+.simple-keyboard .hg-row {
   display: flex !important;
   flex-flow: row wrap;
   justify-content: center;
-  }
+  margin-bottom: 10px;
+}
 
-/* Slight spacing around each key (optional) */
-.simple-keyboard-main .hg-row .hg-button {
-    margin: 3px !important;
-  }
+/* Remove any unwanted shrink/stretch */
+.simple-keyboard .hg-button {
+  flex: 0 0 auto;
+}
 
-  /* Keep the entire keyboard from shrinking or going vertical */
-  .simple-keyboard-main {
-    display: inline-block !important;
-    width: auto !important;
-    max-width: 1000px; /* or whatever max width you like */
-  }
+/* Optional: on-screen keyboard input field (if you ever show it) */
+input[type="text"].simple-keyboard-input {
+  width: 100%;
+  height: 48px;
+  padding: 10px 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+  background: #181818;
+  color: #f5f7fa;
+  border-radius: 6px;
+  margin-bottom: 20px;
+}

Data/Server/WebUI/src/nodes/Agent Roles/Node_Agent_Role_Macro.jsx

@@ -1,4 +1,4 @@
-////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Agent Roles/Node_Agent_Role_Macro.jsx
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Automation/Node_Macro.jsx
 import React, { useState, useEffect, useRef } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
 import Keyboard from "react-simple-keyboard";
@@ -410,12 +410,11 @@ const MacroKeyPressNode = ({ id, data }) => {
                 textAlign: "center"
               }}
             >
-              Full Keyboard
+              Click on the Desired Key
             </div>
             <Keyboard
               onKeyPress={onKeyPress}
               layoutName={layoutName}
-              theme="hg-theme-dark hg-layout-default"
               layout={{
                 default: [
                   "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
@@ -436,7 +435,7 @@ const MacroKeyPressNode = ({ id, data }) => {
               }}
               display={{
                 "{bksp}": "⌫",
-                "{escape}": "esc",
+                "{escape}": "ESC",
                 "{tab}": "tab",
                 "{lock}": "caps",
                 "{enter}": "enter",
@@ -455,6 +454,7 @@ const MacroKeyPressNode = ({ id, data }) => {
                 "{f11}": "F11",
                 "{f12}": "F12"
               }}
+              theme="simple-keyboard"
             />
             <div style={{ display: "flex", justifyContent: "center", marginTop: "8px" }}>
               <button onClick={() => setShowKeyboard(false)} style={buttonStyle}>
@@ -508,7 +508,7 @@ const keyboardContainer = {
   borderRadius: "6px",
   border: "1px solid #444",
   zIndex: 1001,
-  maxWidth: "650px"
+  maxWidth: "950px"
 };
 
 export default {