Breadcrumbs consistency

app/components/SideNav.module.css

@@ -28,6 +28,7 @@
 	align-items: center;
 	padding-inline: var(--s-2);
 	flex-shrink: 0;
+	overflow: hidden;
 }
 
 .sideNavTopCentered {

app/components/layout/index.module.css

@@ -18,12 +18,18 @@
 	z-index: 10;
 }
 
+.siteTitleFlipper {
+	min-width: 0;
+	overflow: hidden;
+}
+
 .siteTitle {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
 	height: 100%;
 	min-width: 0;
+	overflow: hidden;
 }
 
 .siteLogo {
@@ -101,6 +107,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	min-width: 0;
 	animation: fadeInFull 200ms ease-out 150ms both;
 }
 

app/components/layout/index.tsx

@@ -337,7 +337,10 @@ function SiteTitle() {
 	const hasBreadcrumbs = breadcrumbs.length > 0;
 
 	return (
-		<Flipper flipKey={isFrontPage ? "front" : "other"}>
+		<Flipper
+			flipKey={isFrontPage ? "front" : "other"}
+			className={styles.siteTitleFlipper}
+		>
 			<div className={styles.siteTitle}>
 				<Flipped flipId="site-logo">
 					<Link to="/" className={styles.siteLogo}>

app/features/articles/routes/a.$slug.tsx

@@ -7,7 +7,6 @@ import invariant from "~/utils/invariant";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import {
 	ARTICLES_MAIN_PAGE,
-	articlePage,
 	articlePreviewUrl,
 	navIconUrl,
 } from "~/utils/urls";
@@ -28,11 +27,6 @@ export const handle: SendouRouteHandle = {
 				href: ARTICLES_MAIN_PAGE,
 				type: "IMAGE",
 			},
-			{
-				text: data.title,
-				href: articlePage(data.slug),
-				type: "TEXT",
-			},
 		];
 	},
 };
@@ -64,7 +58,9 @@ export default function ArticlePage() {
 				<div className="text-sm text-lighter">
 					by <Author /> • <time>{data.dateString}</time>
 				</div>
-				<Markdown>{contentWithoutLeadingTitle(data.content, data.title)}</Markdown>
+				<Markdown>
+					{contentWithoutLeadingTitle(data.content, data.title)}
+				</Markdown>
 			</article>
 		</Main>
 	);
@@ -81,9 +77,13 @@ function normalizeText(text: string) {
 function contentWithoutLeadingTitle(content: string, title: string) {
 	const trimmed = content.trimStart();
 	const firstLineEnd = trimmed.indexOf("\n");
-	const firstLine = firstLineEnd === -1 ? trimmed : trimmed.slice(0, firstLineEnd);
+	const firstLine =
+		firstLineEnd === -1 ? trimmed : trimmed.slice(0, firstLineEnd);
 
-	if (firstLine.startsWith("# ") && normalizeText(firstLine.slice(2)) === normalizeText(title)) {
+	if (
+		firstLine.startsWith("# ") &&
+		normalizeText(firstLine.slice(2)) === normalizeText(title)
+	) {
 		return trimmed.slice(firstLine.length).trimStart();
 	}
 

app/features/build-stats/routes/builds.$slug.popular.tsx

@@ -45,11 +45,6 @@ export const handle: SendouRouteHandle = {
 				href: weaponBuildPage(data.meta.slug),
 				type: "IMAGE",
 			},
-			{
-				href: "/",
-				text: data.meta.breadcrumbText,
-				type: "TEXT",
-			},
 		];
 	},
 };

app/features/build-stats/routes/builds.$slug.stats.tsx

@@ -48,11 +48,6 @@ export const handle: SendouRouteHandle = {
 				href: weaponBuildPage(data.meta.slug),
 				type: "IMAGE",
 			},
-			{
-				href: "/",
-				text: data.meta.breadcrumbText,
-				type: "TEXT",
-			},
 		];
 	},
 };

app/features/tournament/routes/to.$id.tsx

@@ -19,7 +19,6 @@ import { removeMarkdown } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import {
 	tournamentDivisionsPage,
-	tournamentOrganizationPage,
 	tournamentPage,
 	tournamentRegisterPage,
 } from "~/utils/urls";
@@ -70,24 +69,13 @@ export const handle: SendouRouteHandle = {
 		const data = JSON.parse(rawData) as TournamentLoaderData;
 
 		return [
-			data.tournament.ctx.organization?.logoUrl
-				? {
-						imgPath: data.tournament.ctx.organization.logoUrl,
-						href: tournamentOrganizationPage({
-							organizationSlug: data.tournament.ctx.organization.slug,
-						}),
-						type: "IMAGE" as const,
-						text: "",
-						rounded: true,
-					}
-				: null,
 			{
 				imgPath: data.tournament.ctx.logoUrl,
 				href: tournamentPage(data.tournament.ctx.id),
 				type: "IMAGE" as const,
 				text: data.tournament.ctx.name,
 			},
-		].filter((crumb) => crumb !== null);
+		];
 	},
 };
 

app/features/user-page/routes/u.$identifier.tsx

@@ -8,6 +8,7 @@ import { useHasRole } from "~/modules/permissions/hooks";
 import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import {
+	discordAvatarUrl,
 	userAdminPage,
 	userArtPage,
 	userBuildsPage,
@@ -44,10 +45,23 @@ export const handle: SendouRouteHandle = {
 
 		if (!data) return [];
 
+		if (!data.user.discordAvatar) {
+			return {
+				text: data.user.username,
+				href: userPage(data.user),
+				type: "TEXT",
+			};
+		}
+
 		return {
-			text: data.user.username,
+			imgPath: discordAvatarUrl({
+				discordId: data.user.discordId,
+				discordAvatar: data.user.discordAvatar,
+				size: "sm",
+			}),
 			href: userPage(data.user),
-			type: "TEXT",
+			type: "IMAGE",
+			text: data.user.username,
 		};
 	},
 };