Updated expanded view. Some style fixes.

src/components/metrics/MetricLabel.tsx

@@ -115,14 +115,20 @@ export function MetricLabel({ type, data }: MetricLabelProps) {
         />
       );
 
-    case 'grouped':
+    case 'domain':
       if (label === 'Other') {
         return `(${formatMessage(labels.other)})`;
       } else {
+        const name = GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name;
+
+        if (!name) {
+          return null;
+        }
+
         return (
           <Row alignItems="center" gap="3">
             <Favicon domain={label} />
-            {GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name}
+            {name}
           </Row>
         );
       }

src/components/metrics/MetricsExpandedTable.tsx

@@ -70,7 +70,11 @@ export function MetricsExpandedTable({
           {items && (
             <DataTable data={items}>
               <DataColumn id="label" label={title} width="2fr" align="start">
-                {row => <MetricLabel type={type} data={row} />}
+                {row => (
+                  <Row overflow="hidden">
+                    <MetricLabel type={type} data={row} />
+                  </Row>
+                )}
               </DataColumn>
               <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
                 {row => row?.['visitors']?.toLocaleString()}

src/components/metrics/MetricsTable.tsx

@@ -55,8 +55,8 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, limit, type]);
 
-  const renderLabel = (data: any) => {
-    return <MetricLabel type={type} data={data} />;
+  const renderLabel = (row: any) => {
+    return <MetricLabel type={type} data={row} />;
   };
 
   return (