make sure text next to icons doesn't shift on page load

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -13,7 +13,7 @@ export default component$(() => {
 	const location = useLocation()
 
 	const renderNavLink = ({ iconName, linkText, linkTarget, linkActiveRegex }: LinkConfig) => {
-		let classList = 'mx-4 my-5 block no-underline text-semi max-w-max ' + location.pathname
+		let classList = 'mx-4 my-5 h-5 flex no-underline text-semi max-w-max ' + location.pathname
 
 		if (linkActiveRegex.test(location.pathname)) {
 			classList += ' text-wildebeest-vibrant-400'
@@ -23,7 +23,7 @@ export default component$(() => {
 
 		return (
 			<Link href={linkTarget} class={classList} aria-label={linkText}>
-				<i style={{ width: '1.25rem', height: '1rem' }} class={`fa ${iconName} fa-fw md:mr-3 w-5 h-4`} />
+				<i class={`fa ${iconName} fa-fw md:mr-3 w-5 leading-tight inline-block`} />
 				<span class="hidden md:inline">{linkText}</span>
 			</Link>
 		)

frontend/src/routes/(frontend)/explore/layout.tsx

@@ -42,8 +42,8 @@ export default component$(() => {
 	return (
 		<div class="explore-wrapper flex flex-col">
 			<StickyHeader>
-				<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
-					<i style={{ width: '1.25rem', height: '1rem' }} class="fa fa-hashtag fa-fw mr-3 w-5 h-4" />
+				<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700 xl:rounded-t">
+					<i class="fa fa-hashtag fa-fw mr-3 w-5 leading-tight inline-block" />
 					<span>Explore</span>
 				</h2>
 			</StickyHeader>