[client] Add RTL layout support to the desktop UI (#8076)

* [client] Add RTL layout support to the desktop UI

<html dir> follows the active language, Radix primitives get the
matching dir, physical spacing/positioning uses logical utilities, and
directional icons, animations, arrow-key navigation and tooltip sides
flip in RTL.

* [client] Address RTL review feedback

Force LTR with isolation for monospace values, let truncated names
take their direction from their content, and keep the profile name
field in the UI direction.

* [client] Keep translated monospace labels in their own direction

The forced-LTR rule for monospace values now skips elements with an
explicit dir, translated development labels use dir=auto, and
monospace values rendered through TruncatedText opt into LTR.

---------

Co-authored-by: Edward <43848523+thomashacker@users.noreply.github.com>

client/ui/frontend/src/components/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import * as RTooltip from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/cn";
+import { useDirection } from "@/hooks/useDirection";
 
 type Props = {
     content: ReactNode;
@@ -29,6 +30,8 @@ export const Tooltip = ({
     contentClassName,
     closeDelay = 0,
 }: Props) => {
+    const dir = useDirection();
+    const physicalSide = dir === "rtl" ? mirrorSide(side) : side;
     const [open, setOpen] = useState(false);
     const hoveringRef = useRef(false);
     const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -73,7 +76,7 @@ export const Tooltip = ({
                 </RTooltip.Trigger>
                 <RTooltip.Portal>
                     <RTooltip.Content
-                        side={side}
+                        side={physicalSide}
                         align={align}
                         sideOffset={sideOffset}
                         alignOffset={alignOffset}
@@ -96,3 +99,9 @@ export const Tooltip = ({
         </RTooltip.Provider>
     );
 };
+
+function mirrorSide(side: Props["side"]): Props["side"] {
+    if (side === "left") return "right";
+    if (side === "right") return "left";
+    return side;
+}