From 8973bae0034d06d80750007275832d6db15fbe33 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Fri, 2 Jan 2026 18:49:09 +0100
Subject: [PATCH] style: fix breadcrumbs breaking the layout on smaller devices

---
 app/client/components/app-breadcrumb.tsx |  2 +-
 app/client/components/layout.tsx         |  4 ++--
 app/client/components/ui/breadcrumb.tsx  | 16 ++++++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/client/components/app-breadcrumb.tsx b/app/client/components/app-breadcrumb.tsx
index b6c32b29..6f602f62 100644
--- a/app/client/components/app-breadcrumb.tsx
+++ b/app/client/components/app-breadcrumb.tsx
@@ -38,7 +38,7 @@ export function AppBreadcrumb() {
 	}
 
 	return (
-		<Breadcrumb>
+		<Breadcrumb className="min-w-0">
 			<BreadcrumbList>
 				{breadcrumbs.map((breadcrumb, index) => {
 					const isLast = index === breadcrumbs.length - 1;
diff --git a/app/client/components/layout.tsx b/app/client/components/layout.tsx
index 9ddbbef7..6030391d 100644
--- a/app/client/components/layout.tsx
+++ b/app/client/components/layout.tsx
@@ -43,8 +43,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 			<AppSidebar />
 			<div className="w-full relative flex flex-col h-screen overflow-hidden">
 				<header className="z-50 bg-card-header border-b border-border/50 shrink-0">
-					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
-						<div className="flex items-center gap-4">
+					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container gap-4">
+						<div className="flex items-center gap-4 min-w-0">
 							<SidebarTrigger />
 							<AppBreadcrumb />
 						</div>
diff --git a/app/client/components/ui/breadcrumb.tsx b/app/client/components/ui/breadcrumb.tsx
index 4d0d3eab..e1fb0843 100644
--- a/app/client/components/ui/breadcrumb.tsx
+++ b/app/client/components/ui/breadcrumb.tsx
@@ -4,8 +4,8 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "~/client/lib/utils";
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn("min-w-0", className)} {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 		<ol
 			data-slot="breadcrumb-list"
 			className={cn(
-				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-words sm:gap-2.5",
+				"text-muted-foreground flex items-center gap-1.5 text-sm sm:gap-2.5 min-w-0",
 				className,
 			)}
 			{...props}
@@ -22,7 +22,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5 min-w-0", className)} {...props} />;
 }
 
 function BreadcrumbLink({
@@ -35,7 +35,11 @@ function BreadcrumbLink({
 	const Comp = asChild ? Slot : "a";
 
 	return (
-		<Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn("hover:text-foreground transition-colors truncate", className)}
+			{...props}
+		/>
 	);
 }
 
@@ -46,7 +50,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 			role="link"
 			aria-disabled="true"
 			aria-current="page"
-			className={cn("text-foreground font-normal", className)}
+			className={cn("text-foreground font-normal truncate", className)}
 			{...props}
 		/>
 	);