From 27c342811e40a9e40d75d893ff6faa7f00e9a094 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 24 Sep 2025 00:07:17 -0700
Subject: [PATCH] Added label to PageHeader. Style fixes.

---
 package.components.json                         | 2 +-
 src/app/(main)/SideNav.tsx                      | 2 +-
 src/app/(main)/links/[linkId]/LinkHeader.tsx    | 2 +-
 src/app/(main)/pixels/[pixelId]/PixelHeader.tsx | 2 +-
 src/app/(main)/websites/WebsitesPage.tsx        | 2 +-
 src/components/common/PageHeader.tsx            | 6 +++++-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/package.components.json b/package.components.json
index ba951df9..927e0660 100644
--- a/package.components.json
+++ b/package.components.json
@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.125.0",
+  "version": "0.127.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index c351ef47..6e67465c 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -69,7 +69,7 @@ export function SideNav(props: SidebarProps) {
                 <SidebarItem
                   label={label}
                   icon={icon}
-                  isSelected={pathname.endsWith(path)}
+                  isSelected={pathname.includes(path)}
                   role="button"
                 />
               </Link>
diff --git a/src/app/(main)/links/[linkId]/LinkHeader.tsx b/src/app/(main)/links/[linkId]/LinkHeader.tsx
index 0d325ebb..ba1de3ee 100644
--- a/src/app/(main)/links/[linkId]/LinkHeader.tsx
+++ b/src/app/(main)/links/[linkId]/LinkHeader.tsx
@@ -10,7 +10,7 @@ export function LinkHeader() {
   const link = useLink();
 
   return (
-    <PageHeader title={link.name} description={link.url} icon={<Link />}>
+    <PageHeader title={link.name} description={link.url} icon={<Link />} marginBottom="3">
       <LinkButton href={getSlugUrl(link.slug)} target="_blank">
         <Icon>
           <ExternalLink />
diff --git a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
index 991d807d..7e1a62b8 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
@@ -10,7 +10,7 @@ export function PixelHeader() {
   const pixel = usePixel();
 
   return (
-    <PageHeader title={pixel.name} description={pixel.slug} icon={<Grid2x2 />}>
+    <PageHeader title={pixel.name} icon={<Grid2x2 />} marginBottom="3">
       <LinkButton href={getSlugUrl(pixel.slug)} target="_blank">
         <Icon>
           <ExternalLink />
diff --git a/src/app/(main)/websites/WebsitesPage.tsx b/src/app/(main)/websites/WebsitesPage.tsx
index 5f1aaae8..313dccc7 100644
--- a/src/app/(main)/websites/WebsitesPage.tsx
+++ b/src/app/(main)/websites/WebsitesPage.tsx
@@ -14,7 +14,7 @@ export function WebsitesPage() {
   return (
     <PageBody>
       <Column gap="6" margin="2">
-        <PageHeader title={formatMessage(labels.websites)} label={'back'} description={'Websites'}>
+        <PageHeader title={formatMessage(labels.websites)}>
           <WebsiteAddButton teamId={teamId} />
         </PageHeader>
         <Panel>
diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index a5850f73..4049e0c6 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -38,7 +38,11 @@ export function PageHeader({
           )}
           {title && <Heading size="4">{title}</Heading>}
         </Row>
-        {description && <Text color="muted">{description}</Text>}
+        {description && (
+          <Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>
+            {description}
+          </Text>
+        )}
       </Column>
       <Row justifyContent="flex-end">{children}</Row>
     </Row>