diff --git a/components/LinkPanel.module.css b/components/LinkPanel.module.css
index b4d0c32..ed3ab20 100644
--- a/components/LinkPanel.module.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/components/LinkPanel.tsx b/components/LinkPanel.tsx
index e97e808..71e8308 100644
--- a/components/LinkPanel.tsx
+++ b/components/LinkPanel.tsx
@@ -17,9 +17,12 @@ export type LinkPanelProps = {
export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
const panel = (
-
- {text}
-
+ <>
+
+
+ {text}
+
+ >
)
if(href) {