chore: consolidate platform split checks

webui/src/components/help/InlineHelp.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { usePlatformLanguage } from "../../i18n/LanguageContext";
 
 type InlineHelpProps = {
   children: ReactNode;
@@ -42,6 +43,7 @@ function clamp(value: number, min: number, max: number) {
 }
 
 export default function InlineHelp({ children, className = "" }: InlineHelpProps) {
+  const { translateText } = usePlatformLanguage();
   const tooltipId = useId();
   const triggerRef = useRef<HTMLSpanElement | null>(null);
   const tooltipRef = useRef<HTMLDivElement | null>(null);
@@ -82,9 +84,9 @@ export default function InlineHelp({ children, className = "" }: InlineHelpProps
     const topCandidate = triggerRect.top - tooltipRect.height - TRIGGER_GAP;
     const hasRoomAbove = topCandidate >= VIEWPORT_MARGIN;
     const bottomCandidate = triggerRect.bottom + TRIGGER_GAP;
-    const top = hasRoomAbove
-      ? topCandidate
-      : clamp(bottomCandidate, VIEWPORT_MARGIN, window.innerHeight - tooltipRect.height - VIEWPORT_MARGIN);
+    const top = hasRoomAbove ?
+    topCandidate :
+    clamp(bottomCandidate, VIEWPORT_MARGIN, window.innerHeight - tooltipRect.height - VIEWPORT_MARGIN);
 
     setPosition({
       top,
@@ -135,52 +137,52 @@ export default function InlineHelp({ children, className = "" }: InlineHelpProps
     opacity: position ? 1 : 0
   };
 
-  const arrowStyle: CSSProperties = position?.placement === "bottom"
-    ? {
-        position: "absolute",
-        left: position.arrowLeft,
-        top: 0,
-        width: 9,
-        height: 9,
-        borderLeft: "1px solid var(--line-dark)",
-        borderTop: "1px solid var(--line-dark)",
-        background: "var(--surface)",
-        transform: "translate(-50%, -5px) rotate(45deg)"
-      }
-    : {
-        position: "absolute",
-        left: position?.arrowLeft ?? 16,
-        top: "100%",
-        width: 9,
-        height: 9,
-        borderRight: "1px solid var(--line-dark)",
-        borderBottom: "1px solid var(--line-dark)",
-        background: "var(--surface)",
-        transform: "translate(-50%, -5px) rotate(45deg)"
-      };
+  const arrowStyle: CSSProperties = position?.placement === "bottom" ?
+  {
+    position: "absolute",
+    left: position.arrowLeft,
+    top: 0,
+    width: 9,
+    height: 9,
+    borderLeft: "1px solid var(--line-dark)",
+    borderTop: "1px solid var(--line-dark)",
+    background: "var(--surface)",
+    transform: "translate(-50%, -5px) rotate(45deg)"
+  } :
+  {
+    position: "absolute",
+    left: position?.arrowLeft ?? 16,
+    top: "100%",
+    width: 9,
+    height: 9,
+    borderRight: "1px solid var(--line-dark)",
+    borderBottom: "1px solid var(--line-dark)",
+    background: "var(--surface)",
+    transform: "translate(-50%, -5px) rotate(45deg)"
+  };
 
   return (
     <>
       <span
         ref={triggerRef}
         className={`inline-help ${className}`.trim()}
-        tabIndex={0}
-        aria-label="Show field help"
+        tabIndex={-1}
+        aria-label={translateText("i18n:govoplan-core.show_field_help.e3dfe98f")}
         aria-describedby={isOpen ? tooltipId : undefined}
         onMouseEnter={openWithDelay}
         onMouseLeave={close}
         onFocus={openWithDelay}
-        onBlur={close}
-      >
+        onBlur={close}>
+        
         <span className="inline-help-mark" aria-hidden="true">?</span>
       </span>
       {isOpen && createPortal(
         <div ref={tooltipRef} id={tooltipId} role="tooltip" style={tooltipStyle}>
-          {children}
+          {typeof children === "string" ? translateText(children) : children}
           <span aria-hidden="true" style={arrowStyle} />
         </div>,
         document.body
       )}
-    </>
-  );
+    </>);
+
 }