danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

style: fix breadcrumbs breaking the layout on smaller devices

Browse source
This commit is contained in:
Nicolas Meienberger 2026-01-02 18:49:09 +01:00
parent d0829e2bf2
commit 8973bae003
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/client/components/app-breadcrumb.tsx
View file

@ -38,7 +38,7 @@ export function AppBreadcrumb() {
} }
return ( return (
<Breadcrumb> <Breadcrumb className="min-w-0">
<BreadcrumbList> <BreadcrumbList>
{breadcrumbs.map((breadcrumb, index) => { {breadcrumbs.map((breadcrumb, index) => {
const isLast = index === breadcrumbs.length - 1; const isLast = index === breadcrumbs.length - 1;

4
app/client/components/layout.tsx
View file

@ -43,8 +43,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
<AppSidebar /> <AppSidebar />
<div className="w-full relative flex flex-col h-screen overflow-hidden"> <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"> <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 justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 min-w-0">
<SidebarTrigger /> <SidebarTrigger />
<AppBreadcrumb /> <AppBreadcrumb />
</div> </div>

16
app/client/components/ui/breadcrumb.tsx
View file

@ -4,8 +4,8 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "~/client/lib/utils"; import { cn } from "~/client/lib/utils";
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />; return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn("min-w-0", className)} {...props} />;
} }
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
<ol <ol
data-slot="breadcrumb-list" data-slot="breadcrumb-list"
className={cn( 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, className,
)} )}
{...props} {...props}
@ -22,7 +22,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
} }
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { 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({ function BreadcrumbLink({
@ -35,7 +35,11 @@ function BreadcrumbLink({
const Comp = asChild ? Slot : "a"; const Comp = asChild ? Slot : "a";
return ( 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" role="link"
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
className={cn("text-foreground font-normal", className)} className={cn("text-foreground font-normal truncate", className)}
{...props} {...props}
/> />
); );