style(app): align help menu versions on a right rail

The app and host version lines ran as one sentence, so the versions ragged
with the length of each name and were hard to compare. Menu hints now take an
optional trailing cell and lay out as key/value across the row.

Renaming the string to a plain name drops its interpolation, so every locale
carries the same untranslated product name it already had.

MenuHint renders in one place today (this menu), so the row layout in the
shared component changes nothing else.

packages/app/src/components/sidebar/sidebar-help-menu.tsx

@@ -68,9 +68,10 @@ function HostVersionHint({ host }: { host: HostProfile }) {
   return (
     <DropdownMenuHint
       style={styles.versionHint}
+      trailing={version}
       testID={`sidebar-help-host-version-${host.serverId}`}
     >
-      {host.label} {version}
+      {host.label}
     </DropdownMenuHint>
   );
 }
@@ -167,8 +168,12 @@ export function SidebarHelpMenu() {
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <View style={styles.versionList}>
-          <DropdownMenuHint style={styles.versionHint} testID="sidebar-help-version">
-            {t("sidebar.help.version", { version })}
+          <DropdownMenuHint
+            style={styles.versionHint}
+            trailing={version}
+            testID="sidebar-help-version"
+          >
+            {t("sidebar.help.appName")}
           </DropdownMenuHint>
           {hosts.map((host) => (
             <HostVersionHint key={host.serverId} host={host} />

packages/app/src/components/ui/menu/menu-item.tsx

@@ -103,13 +103,25 @@ export function MenuSeparator({
 
 export function MenuHint({
   children,
+  trailing,
   style,
   testID,
-}: PropsWithChildren<{ style?: ViewStyle | ViewStyle[]; testID?: string }>): ReactElement {
+}: PropsWithChildren<{
+  trailing?: ReactNode;
+  style?: ViewStyle | ViewStyle[];
+  testID?: string;
+}>): ReactElement {
   const hintContainerStyle = useMemo(() => [styles.hintContainer, style], [style]);
   return (
     <View style={hintContainerStyle} testID={testID}>
-      <Text style={styles.hintText}>{children}</Text>
+      <Text style={styles.hintText} numberOfLines={1}>
+        {children}
+      </Text>
+      {trailing === undefined ? null : (
+        <Text style={styles.hintText} numberOfLines={1}>
+          {trailing}
+        </Text>
+      )}
     </View>
   );
 }
@@ -310,13 +322,20 @@ const styles = StyleSheet.create((theme) => ({
     marginVertical: theme.spacing[1],
     backgroundColor: theme.colors.borderAccent,
   },
+  // A hint with `trailing` is a key on the left edge and its value on the right, so the values
+  // line up down the menu's right rail instead of ragging with the length of each key.
   hintContainer: {
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
   },
   hintText: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
+    flexShrink: 1,
   },
   tooltipText: {
     fontSize: theme.fontSize.sm,