Improve links accessibility

components/LinkPanel.module.css

@@ -1,6 +1,9 @@
 .linkPanel {
-    text-decoration: none;
     white-space: nowrap;
+
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
 }
 
 .linkPanel:hover, .linkPanel:focus {
@@ -10,3 +13,14 @@
 .linkPanel:active {
     --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
 }
+
+.linkPanelIcon {
+    justify-self: center;
+    width: 20px;
+    flex-shrink: 0;
+}
+
+.linkPanelText {
+    flex-grow: 1;
+    justify-self: flex-start;
+}

components/LinkPanel.tsx

@@ -17,9 +17,12 @@ export type LinkPanelProps = {
 
 export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
     const panel = (
-        <span>
-            <FontAwesomeIcon icon={icon}/>&nbsp;{text}
-        </span>
+        <>
+            <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
+            <span className={style.linkPanelText}>
+                {text}
+            </span>
+        </>
     )
 
     if(href) {