share component column wrapping. link/pixel card mode. website table formatting. Closes #4372

src/app/(main)/boards/[boardId]/BoardSharesTable.tsx

@@ -1,8 +1,9 @@
-import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
+import { DataColumn, DataTable, Icon, type DataTableProps, Row, Text } from '@umami/react-zen';
 import { ShareDeleteButton } from '@/app/(main)/websites/[websiteId]/settings/ShareDeleteButton';
 import { CopyButton } from '@/components/common/CopyButton';
-import { ExternalLink } from '@/components/common/ExternalLink';
+import Link from '@/components/common/Link';
 import { useConfig, useMessages, useMobile } from '@/components/hooks';
+import { ExternalLink } from '@/components/icons';
 import { SimpleShareEditButton } from '@/components/share/SimpleShareEditButton';
 
 export function BoardSharesTable(props: DataTableProps) {
@@ -23,15 +24,22 @@ export function BoardSharesTable(props: DataTableProps) {
       <DataColumn id="name" label={t(labels.name)}>
         {({ name }: any) => name}
       </DataColumn>
-      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr">
+      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr" style={{ minWidth: 0 }}>
         {({ slug }: any) => {
           const url = getUrl(slug);
 
           return (
-            <Row alignItems="center" gap="1" overflow="hidden">
-              <ExternalLink href={url} prefetch={false}>
-                {isMobile ? slug : url}
-              </ExternalLink>
+            <Row alignItems="center" gap="1" minWidth="0" width="100%" overflow="hidden">
+              <Row alignItems="center" gap minWidth="0" style={{ flex: 1 }}>
+                <Text title={url} style={{ minWidth: 0, flex: 1, overflowWrap: 'anywhere' }}>
+                  <Link href={url} target="_blank" prefetch={false}>
+                    {isMobile ? slug : url}
+                  </Link>
+                </Text>
+                <Icon size="sm" strokeColor="muted" style={{ flexShrink: 0 }}>
+                  <ExternalLink />
+                </Icon>
+              </Row>
               <CopyButton value={url} label="Copy URL" />
             </Row>
           );

src/app/(main)/links/LinksTable.tsx

@@ -27,6 +27,7 @@ export function LinksTable({ showActions, ...props }: LinksTableProps) {
         id="slug"
         label={<SortableLabel label={t(labels.link)} sortKey="slug" />}
         width="25%"
+        style={{ minWidth: 0 }}
       >
         {({ slug }: any) => {
           const url = getSlugUrl(slug);
@@ -37,6 +38,7 @@ export function LinksTable({ showActions, ...props }: LinksTableProps) {
         id="url"
         label={<SortableLabel label={t(labels.destinationUrl)} sortKey="url" />}
         width="30%"
+        style={{ minWidth: 0 }}
       >
         {({ url }: any) => {
           return <ExternalLink href={url}>{url}</ExternalLink>;

src/app/(main)/pixels/PixelsTable.tsx

@@ -23,7 +23,7 @@ export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
           return <Link href={renderUrl(`/pixels/${id}`)}>{name}</Link>;
         }}
       </DataColumn>
-      <DataColumn id="url" label={<SortableLabel label="URL" sortKey="slug" />}>
+      <DataColumn id="url" label={<SortableLabel label="URL" sortKey="slug" />} style={{ minWidth: 0 }}>
         {({ slug }: any) => {
           const url = getSlugUrl(slug);
           return (

src/app/(main)/websites/WebsitesDataTable.tsx

@@ -1,4 +1,4 @@
-import { Icon, Row } from '@umami/react-zen';
+import { Icon, Row, Text } from '@umami/react-zen';
 import { DataGrid } from '@/components/common/DataGrid';
 import Link from '@/components/common/Link';
 import { useLoginQuery, useNavigation, useUserWebsitesQuery } from '@/components/hooks';
@@ -23,11 +23,13 @@ export function WebsitesDataTable({
   const { renderUrl } = useNavigation();
 
   const renderLink = (row: any) => (
-    <Row alignItems="center" gap="3">
-      <Icon size="md" color="muted">
+    <Row alignItems="center" gap="3" minWidth="0" width="100%">
+      <Icon size="md" color="muted" style={{ flexShrink: 0 }}>
         <Favicon domain={row.domain} />
       </Icon>
-      <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>
+      <Text truncate title={row.name} style={{ maxWidth: '100%' }}>
+        <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>
+      </Text>
     </Row>
   );
 

src/app/(main)/websites/WebsitesTable.tsx

@@ -1,4 +1,4 @@
-import { DataColumn, DataTable, type DataTableProps, Icon } from '@umami/react-zen';
+import { DataColumn, DataTable, type DataTableProps, Icon, Text } from '@umami/react-zen';
 import type { ReactNode } from 'react';
 import { DateDistance } from '@/components/common/DateDistance';
 import { LinkButton } from '@/components/common/LinkButton';
@@ -22,7 +22,17 @@ export function WebsitesTable({ showActions, renderLink, ...props }: WebsitesTab
       <DataColumn id="name" label={<SortableLabel label={t(labels.name)} sortKey="name" />}>
         {renderLink}
       </DataColumn>
-      <DataColumn id="domain" label={<SortableLabel label={t(labels.domain)} sortKey="domain" />} />
+      <DataColumn
+        id="domain"
+        label={<SortableLabel label={t(labels.domain)} sortKey="domain" />}
+        style={{ minWidth: 0 }}
+      >
+        {(row: any) => (
+          <Text truncate title={row.domain} style={{ maxWidth: '100%' }}>
+            {row.domain}
+          </Text>
+        )}
+      </DataColumn>
       <DataColumn
         id="created"
         label={
@@ -33,7 +43,7 @@ export function WebsitesTable({ showActions, renderLink, ...props }: WebsitesTab
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
       {showActions && (
-        <DataColumn id="action" label=" " align="end">
+        <DataColumn id="action" label=" " align="end" width="60px">
           {(row: any) => {
             const websiteId = row.id;
 

src/app/(main)/websites/[websiteId]/settings/SharesTable.tsx

@@ -1,8 +1,8 @@
-import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
 import { CopyButton } from '@/components/common/CopyButton';
-import { DateDistance } from '@/components/common/DateDistance';
-import { ExternalLink } from '@/components/common/ExternalLink';
+import Link from '@/components/common/Link';
 import { useConfig, useMessages, useMobile } from '@/components/hooks';
+import { ExternalLink } from '@/components/icons';
+import { DataColumn, DataTable, type DataTableProps, Icon, Row, Text } from '@umami/react-zen';
 import { ShareDeleteButton } from './ShareDeleteButton';
 import { ShareEditButton } from './ShareEditButton';
 
@@ -23,14 +23,22 @@ export function SharesTable(props: DataTableProps) {
       <DataColumn id="name" label={t(labels.name)}>
         {({ name }: any) => name}
       </DataColumn>
-      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr">
+      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr" style={{ minWidth: 0 }}>
         {({ slug }: any) => {
           const url = getUrl(slug);
+
           return (
-            <Row alignItems="center" gap="1" overflow="hidden">
-              <ExternalLink href={url} prefetch={false}>
-                {isMobile ? slug : url}
-              </ExternalLink>
+            <Row alignItems="center" gap="1" minWidth="0" width="100%" overflow="hidden">
+              <Row alignItems="center" gap minWidth="0" style={{ flex: 1 }}>
+                <Text title={url} style={{ minWidth: 0, flex: 1, overflowWrap: 'anywhere' }}>
+                  <Link href={url} target="_blank" prefetch={false}>
+                    {isMobile ? slug : url}
+                  </Link>
+                </Text>
+                <Icon size="sm" strokeColor="muted" style={{ flexShrink: 0 }}>
+                  <ExternalLink />
+                </Icon>
+              </Row>
               <CopyButton value={url} label="Copy URL" />
             </Row>
           );

src/components/share/SimpleSharesTable.tsx

@@ -1,8 +1,9 @@
-import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
+import { DataColumn, DataTable, Icon, type DataTableProps, Row, Text } from '@umami/react-zen';
 import { ShareDeleteButton } from '@/app/(main)/websites/[websiteId]/settings/ShareDeleteButton';
 import { CopyButton } from '@/components/common/CopyButton';
-import { ExternalLink } from '@/components/common/ExternalLink';
+import Link from '@/components/common/Link';
 import { useConfig, useMessages, useMobile } from '@/components/hooks';
+import { ExternalLink } from '@/components/icons';
 import { SimpleShareEditButton } from './SimpleShareEditButton';
 
 export function SimpleSharesTable(props: DataTableProps) {
@@ -24,15 +25,22 @@ export function SimpleSharesTable(props: DataTableProps) {
       <DataColumn id="name" label={t(labels.name)}>
         {({ name }: any) => name}
       </DataColumn>
-      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr">
+      <DataColumn id="slug" label={t(labels.shareUrl)} width="2fr" style={{ minWidth: 0 }}>
         {({ slug }: any) => {
           const url = getUrl(slug);
 
           return (
-            <Row alignItems="center" gap="1" overflow="hidden">
-              <ExternalLink href={url} prefetch={false}>
-                {isMobile ? slug : url}
-              </ExternalLink>
+            <Row alignItems="center" gap="1" minWidth="0" width="100%" overflow="hidden">
+              <Row alignItems="center" gap minWidth="0" style={{ flex: 1 }}>
+                <Text title={url} style={{ minWidth: 0, flex: 1, overflowWrap: 'anywhere' }}>
+                  <Link href={url} target="_blank" prefetch={false}>
+                    {isMobile ? slug : url}
+                  </Link>
+                </Text>
+                <Icon size="sm" strokeColor="muted" style={{ flexShrink: 0 }}>
+                  <ExternalLink />
+                </Icon>
+              </Row>
               <CopyButton value={url} label="Copy URL" />
             </Row>
           );