Repository: cloudflare/wildebeest
File: frontend/src/components/Status/index.tsx (TypeScript)

Code before:
import { component$, $, useStyles$ } from '@builder.io/qwik'
import { Link, useNavigate } from '@builder.io/qwik-city'
import { formatTimeAgo } from '~/utils/dateTime'
import { Avatar } from '../avatar'
import type { Account, MastodonStatus } from '~/types'
import styles from '../../utils/innerHtmlContent.scss?inline'
import { MediaGallery } from '../MediaGallery.tsx'
import { useAccountUrl } from '~/utils/useAccountUrl'

type Props = {
	status: MastodonStatus
}

export default component$((props: Props) => {
	useStyles$(styles)
	const nav = useNavigate()

	const status = props.status.reblog ?? props.status
	const reblogger = props.status.reblog && props.status.account

	const accountUrl = useAccountUrl(status.account)
	const statusUrl = `${accountUrl}/${status.id}`

	const handleContentClick = $(() => nav(statusUrl))

	return (
		<article class="p-4 border-t border-wildebeest-700 pointer">
			<RebloggerLink account={reblogger}></RebloggerLink>
			<div onClick$={handleContentClick}>
				<div class="flex justify-between mb-3">
					<div class="flex">
						<Avatar primary={status.account} secondary={reblogger} />
						<div class="flex-col ml-3">
							<div>
								<Link class="no-underline" href={accountUrl}>
									{status.account.display_name}
								</Link>
							</div>
							<div class="text-wildebeest-500">@{status.account.username}</div>
						</div>
					</div>
					<Link class="no-underline" href={statusUrl}>
						<div class="text-wildebeest-500 flex items-baseline">
							<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
							<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
						</div>

Review comment (suggestion):
in my original change I forgot to update this one
(https://github.com/cloudflare/wildebeest/blob/c8e9f04b9b77e64f562dea52bf991a149e36bf89/frontend/src/components/Status/index.tsx#L21)

I wonder if that was the only issue

Code after:
import { component$, $, useStyles$ } from '@builder.io/qwik'
import { Link, useNavigate } from '@builder.io/qwik-city'
import { formatTimeAgo } from '~/utils/dateTime'
import { Avatar } from '../avatar'
import type { Account, MastodonStatus } from '~/types'
import styles from '../../utils/innerHtmlContent.scss?inline'
import { MediaGallery } from '../MediaGallery.tsx'
import { useAccountUrl } from '~/utils/useAccountUrl'

type Props = {
	status: MastodonStatus
}

export default component$((props: Props) => {
	useStyles$(styles)
	const nav = useNavigate()

	const status = props.status.reblog ?? props.status
	const reblogger = props.status.reblog && props.status.account

	const accountUrl = useAccountUrl(status.account)
	const statusUrl = `${accountUrl}/${status.id}`

	const handleContentClick = $(() => nav(statusUrl))

	return (
		<article class="p-4 border-t border-wildebeest-700 break-words sm:break-normal">
			<RebloggerLink account={reblogger}></RebloggerLink>
			<div onClick$={handleContentClick}>
				<div class="flex justify-between mb-3">
					<div class="flex">
						<Avatar primary={status.account} secondary={reblogger} />
						<div class="flex-col ml-3">
							<div>
								<Link class="no-underline" href={accountUrl}>
									{status.account.display_name}
								</Link>
							</div>
							<div class="text-wildebeest-500">@{status.account.username}</div>
						</div>
					</div>
					<Link class="no-underline" href={statusUrl}>
						<div class="text-wildebeest-500 flex items-baseline">
							<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
							<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
						</div>