From ddec1320738075cb0a11ec5a54d71b020a6ab187 Mon Sep 17 00:00:00 2001
From: ttbombadil <tom.tiltmann@th-koeln.de>
Date: Fri, 20 Feb 2026 12:00:48 +0100
Subject: [PATCH] fix(sim): restore font-scale & stabilize stop logic

---
 client/src/hooks/use-simulation-controls.ts | 15 ++++++++++++++-
 client/src/pages/arduino-simulator.tsx      |  2 ++
 tailwind.config.ts                          | 16 +++++++++-------
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/client/src/hooks/use-simulation-controls.ts b/client/src/hooks/use-simulation-controls.ts
index e7b43a5c..baa7a9fa 100644
--- a/client/src/hooks/use-simulation-controls.ts
+++ b/client/src/hooks/use-simulation-controls.ts
@@ -16,6 +16,8 @@ type DebugMessageParams = {
 type UseSimulationControlsParams = {
   ensureBackendConnected: (reason: string) => boolean;
   sendMessage: (message: any) => void;
+  /** Optional immediate sender for time-critical commands (stop) */
+  sendMessageImmediate?: (message: any) => void;
   resetPinUI: (opts?: { keepDetected?: boolean }) => void;
   clearOutputs: () => void;
   addDebugMessage: (params: DebugMessageParams) => void;
@@ -38,6 +40,8 @@ type UseSimulationControlsParams = {
 export function useSimulationControls({
   ensureBackendConnected,
   sendMessage,
+  /** Optional immediate sender for time-critical commands (stop) */
+  sendMessageImmediate,
   resetPinUI,
   clearOutputs,
   addDebugMessage,
@@ -68,7 +72,16 @@ export function useSimulationControls({
         data: JSON.stringify({ type: "stop_simulation" }, null, 2),
         protocol: "websocket",
       });
-      sendMessage({ type: "stop_simulation" });
+      // prefer immediate send for STOP (time-critical)
+      if ((arguments as any)?.[0] && typeof (arguments as any)[0].sendMessageImmediate === "function") {
+        // noop: defensive - not used; prefer the passed-in prop below
+      }
+      // use provided immediate sender when available, fall back to buffered send
+      // (don't change other lifecycle flows)
+      // @ts-ignore - sendMessageImmediate may be undefined in older call-sites
+      const immediate = (sendMessageImmediate as any) ?? undefined;
+      if (immediate) immediate({ type: "stop_simulation" });
+      else sendMessage({ type: "stop_simulation" });
       return { success: true };
     },
     onSuccess: () => {
diff --git a/client/src/pages/arduino-simulator.tsx b/client/src/pages/arduino-simulator.tsx
index f29cb694..9b63d101 100644
--- a/client/src/pages/arduino-simulator.tsx
+++ b/client/src/pages/arduino-simulator.tsx
@@ -272,6 +272,7 @@ export default function ArduinoSimulator() {
     isConnected,
     lastMessage,
     sendMessage: sendMessageRaw,
+    sendMessageImmediate,
   } = useWebSocket();
   // Mark some hook values as intentionally read to avoid TS unused-local errors
   void lastMessage;
@@ -368,6 +369,7 @@ export default function ArduinoSimulator() {
   } = useSimulationControls({
     ensureBackendConnected,
     sendMessage,
+    sendMessageImmediate,
     resetPinUI,
     clearOutputs,
     addDebugMessage: (params) =>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e8076cf..b5cfcc69 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,13 +6,15 @@ export default {
   theme: {
     extend: {
       fontSize: {
-        "ui-xs": ["12px", { lineHeight: "16px" }],
-        "ui-sm": ["14px", { lineHeight: "20px" }],
-        "ui-md": ["16px", { lineHeight: "24px" }],
-        "ui-lg": ["18px", { lineHeight: "26px" }],
-        "ui-xl": ["20px", { lineHeight: "28px" }],
-        "ui-2xl": ["24px", { lineHeight: "32px" }],
-        "ui-3xl": ["30px", { lineHeight: "36px" }],
+        /* Scale text-ui-* with the central --ui-font-scale variable so components using
+           these semantic tokens react to fontScale changes without changing markup. */
+        "ui-xs": ["calc(12px * var(--ui-font-scale))", { lineHeight: "calc(16px * var(--ui-font-scale))" }],
+        "ui-sm": ["calc(14px * var(--ui-font-scale))", { lineHeight: "calc(20px * var(--ui-font-scale))" }],
+        "ui-md": ["calc(16px * var(--ui-font-scale))", { lineHeight: "calc(24px * var(--ui-font-scale))" }],
+        "ui-lg": ["calc(18px * var(--ui-font-scale))", { lineHeight: "calc(26px * var(--ui-font-scale))" }],
+        "ui-xl": ["calc(20px * var(--ui-font-scale))", { lineHeight: "calc(28px * var(--ui-font-scale))" }],
+        "ui-2xl": ["calc(24px * var(--ui-font-scale))", { lineHeight: "calc(32px * var(--ui-font-scale))" }],
+        "ui-3xl": ["calc(30px * var(--ui-font-scale))", { lineHeight: "calc(36px * var(--ui-font-scale))" }],
       },
       borderRadius: {
         lg: "var(--radius)",