fix: custom relative time to shorten strings for better UI fit

apps/web/src/pages/segments/index.tsx

@@ -13,6 +13,7 @@ import type {Segment} from '@plunk/db';
 import type {FilterCondition} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
+import {formatRelativeTime} from '../../lib/dateUtils';
 import {AlertTriangle, Calendar, Edit, Filter, Plus, Trash2, Users} from 'lucide-react';
 import {NextSeo} from 'next-seo';
 import Link from 'next/link';
@@ -199,14 +200,14 @@ export default function SegmentsPage() {
                         <div className="flex items-center gap-1.5">
                           <Calendar className="h-3 w-3" />
                           <div className="group relative inline-block cursor-help">
-                            <span>Created {dayjs(segment.createdAt).fromNow()}</span>
+                            <span>Created {formatRelativeTime(segment.createdAt)}</span>
                             <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
                               {dayjs(segment.createdAt).format('DD MMMM YYYY, hh:mm')}
                             </div>
                           </div>
                         </div>
                         <div className="group relative inline-block cursor-help">
-                          <span>• Updated {dayjs(segment.updatedAt).fromNow()}</span>
+                          <span>• Updated {formatRelativeTime(segment.updatedAt)}</span>
                           <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
                             {dayjs(segment.updatedAt).format('DD MMMM YYYY, hh:mm')}
                           </div>