Updated expanded view. Some style fixes.

src/components/common/FilterLink.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, useState } from 'react';
 import Link from 'next/link';
-import { Icon, Row } from '@umami/react-zen';
+import { Icon, Row, Text } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { ExternalLink } from '@/components/icons';
 
@@ -31,9 +31,11 @@ export function FilterLink({ type, value, label, externalUrl, icon }: FilterLink
       {icon}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link href={updateParams({ [type]: `eq.${value}` })} replace>
-          {label || value}
-        </Link>
+        <Text title={label || value} truncate>
+          <Link href={updateParams({ [type]: `eq.${value}` })} replace>
+            {label || value}
+          </Link>
+        </Text>
       )}
       {externalUrl && showLink && (
         <a href={externalUrl} target="_blank" rel="noreferrer noopener">

src/components/common/SideMenu.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
   Text,
   Heading,
@@ -7,15 +8,16 @@ import {
   Row,
   Column,
   NavMenuGroup,
+  NavMenuProps,
 } from '@umami/react-zen';
 import Link from 'next/link';
 
-export interface SideMenuProps {
+export interface SideMenuProps extends NavMenuProps {
   items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[];
   title?: string;
   selectedKey?: string;
   allowMinimize?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export function SideMenu({
@@ -24,6 +26,7 @@ export function SideMenu({
   selectedKey,
   allowMinimize,
   children,
+  ...props
 }: SideMenuProps) {
   return (
     <Column
@@ -42,12 +45,12 @@ export function SideMenu({
           <Heading size="1">{title}</Heading>
         </Row>
       )}
-      <NavMenu muteItems={false} gap="6">
-        {items?.map(({ label, items }) => {
+      <NavMenu muteItems={false} gap="6" {...props}>
+        {items?.map(({ label, items }, index) => {
           return (
             <NavMenuGroup
               title={label}
-              key={label}
+              key={`${label}${index}`}
               gap="1"
               allowMinimize={allowMinimize}
               marginBottom="3"