fix issues with the missing info icon

web/src/components/Footer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
 import styles from './Footer.module.scss';
+import { Link } from './Link.js';
 import { applicationStore } from '../stores/index.js';
 
 export const Footer: React.FC = observer(() => {

web/src/components/Header.tsx

@@ -5,10 +5,10 @@ import {
   IoInformationCircle,
   IoLogoTwitter,
 } from 'react-icons/io5';
-import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 
 import styles from './Header.module.scss';
+import { Link } from './Link.js';
 import { DropIcon } from './DropIcon.js';
 import { applicationStore } from '../stores/index.js';
 import { SecureStatus } from './SecureStatus.js';

web/src/components/Link.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import { useLocation, useRouter } from 'wouter';
+
+interface LinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  to: string;
+}
+
+export const Link: React.FC<LinkProps> = forwardRef<
+  HTMLAnchorElement,
+  LinkProps
+>((props, ref) => {
+  const router = useRouter();
+  const [, navigate] = useLocation();
+
+  const { to, onClick, children, ...aProps } = props;
+
+  return (
+    <a
+      ref={ref}
+      {...aProps}
+      href={to[0] === '~' ? to.slice(1) : router.base + to}
+      onClick={event => {
+        // ignores the navigation when clicked using right mouse button or
+        // by holding a special modifier key: ctrl, command, win, alt, shift
+        if (
+          event.ctrlKey ||
+          event.metaKey ||
+          event.altKey ||
+          event.shiftKey ||
+          event.button !== 0
+        )
+          return;
+
+        onClick && onClick(event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          navigate(to);
+        }
+      }}
+    >
+      {children}
+    </a>
+  );
+});

web/src/screens/About.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Link } from 'wouter';
 
+import { Link } from '../components/Link.js';
 import { TextSection } from '../components/TextSection.js';
 
 export const About: React.FC = () => {

web/src/screens/Abuse.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 
+import { Link } from '../components/Link.js';
 import { TextSection } from '../components/TextSection.js';
 import { applicationStore } from '../stores/index.js';
 

web/src/sections/LocalNetworks/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { Link } from 'wouter';
 
 import styles from './index.module.scss';
+import { Link } from '../../components/Link.js';
 import { applicationStore, networkStore } from '../../stores/index.js';
 import { TargetTile } from '../../components/TargetTile.js';