Added label to PageHeader. Style fixes.

Author: mikecao

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",

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>

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 />

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 />

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>

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>