fix(webpapp): [nan-968] helper for formatting the frequency (#2183)

## Describe your changes
Format frequency to a short time unit to prevent line breaks:

![image](https://github.com/NangoHQ/nango/assets/1724137/b398f4c0-471a-4ac1-94aa-d30f0b9ead9d)


## Issue ticket number and link
NAN-968

## Checklist before requesting a review (skip if just adding/editing
APIs & templates)
- [ ] I added tests, otherwise the reason is: 
- [ ] I added observability, otherwise the reason is:
- [ ] I added analytics, otherwise the reason is:

packages/webapp/src/pages/Connection/Syncs.tsx

@@ -16,7 +16,15 @@ import {
 } from '@heroicons/react/24/outline';
 import type { SyncResponse, RunSyncCommand, Connection } from '../../types';
 import { UserFacingSyncCommand } from '../../types';
-import { calculateTotalRuntime, getRunTime, parseLatestSyncResult, formatDateToUSFormat, interpretNextRun, getSimpleDate } from '../../utils/utils';
+import {
+    formatFrequency,
+    calculateTotalRuntime,
+    getRunTime,
+    parseLatestSyncResult,
+    formatDateToUSFormat,
+    interpretNextRun,
+    getSimpleDate
+} from '../../utils/utils';
 import Button from '../../components/ui/button/Button';
 import { useRunSyncAPI } from '../../utils/api';
 
@@ -233,7 +241,7 @@ export default function Syncs({ syncs, connection, reload, loaded, syncLoaded, e
                                             {sync?.status === 'SUCCESS' && renderBubble(<SuccessBubble />, successBubbleStyles, sync)}
                                         </span>
                                     </div>
-                                    <div className="flex items-center w-10">{sync.frequency}</div>
+                                    <div className="flex items-center w-10">{formatFrequency(sync.frequency)}</div>
                                     <div className="flex items-center w-28">
                                         {sync.latest_sync?.result && Object.keys(sync.latest_sync?.result).length > 0 ? (
                                             <Tooltip text={<pre>{parseLatestSyncResult(sync.latest_sync.result, sync.latest_sync.models)}</pre>} type="dark">

packages/webapp/src/utils/utils.tsx

@@ -372,3 +372,22 @@ export function parseEndpoint(endpoint: string | FlowEndpoint): string {
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function formatFrequency(frequency: string): string {
+    const unitMap: Record<string, string> = {
+        minutes: 'm',
+        minute: 'm',
+        hours: 'h',
+        hour: 'h',
+        days: 'd',
+        day: 'd'
+    };
+
+    for (const [unit, abbreviation] of Object.entries(unitMap)) {
+        if (frequency.includes(unit)) {
+            return frequency.replace(unit, abbreviation).replace(/\s/g, '');
+        }
+    }
+
+    return frequency;
+}