fix: align calc mode menu popup styling

samples/calc-01/index.css

@@ -17,6 +17,10 @@
   --key-op-bottom: #304661;
   --key-danger-top: #7a5050;
   --key-danger-bottom: #553636;
+  --key-soft-danger-top: #86605a;
+  --key-soft-danger-bottom: #61433e;
+  --key-cancel-top: #5f6b7c;
+  --key-cancel-bottom: #3f4857;
   --key-enter-top: #7d9079;
   --key-enter-bottom: #4d614b;
   --border: #11151c;
@@ -196,6 +200,23 @@ body {
   background: rgba(18, 24, 34, 0.96);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+#modeMenu {
+  left: 0;
+  right: auto;
+  min-width: 100%;
+  margin-right: 0;
+}
+
+.popup-menu {
+  text-align: left;
+}
+
+.popup-menu button {
+  text-align: left;
+  justify-content: flex-start;
 }
 
 .popup-menu[hidden] {
@@ -325,6 +346,14 @@ button:active {
   background: linear-gradient(180deg, var(--key-danger-top), var(--key-danger-bottom));
 }
 
+.key-soft-danger {
+  background: linear-gradient(180deg, var(--key-soft-danger-top), var(--key-soft-danger-bottom));
+}
+
+.key-cancel {
+  background: linear-gradient(180deg, var(--key-cancel-top), var(--key-cancel-bottom));
+}
+
 .key-enter {
   background: linear-gradient(180deg, var(--key-enter-top), var(--key-enter-bottom));
   grid-row: span 2;

samples/calc-01/index.js

@@ -87,8 +87,8 @@ const topButtons = {
     { type: 'command', value: 'e', label: 'e', className: 'key-function' },
   ],
   del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
-  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-danger' },
+  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-soft-danger' },
-  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-danger' },
+  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-cancel' },
 };
 
 let stackCursor = null;