From f16d507bfc80ccc5b4120c51b38d6bd0b3f4c9ad Mon Sep 17 00:00:00 2001
From: diced <pranaco2@gmail.com>
Date: Fri, 3 Jan 2025 16:01:52 -0800
Subject: [PATCH] fix: long urls get wrapped

---
 .../pages/serverSettings/parts/ServerSettingsFiles.tsx      | 3 +--
 src/components/pages/urls/UrlCard.tsx                       | 6 +++---
 src/components/pages/urls/views/UrlTableView.tsx            | 4 ++--
 src/lib/url.ts                                              | 4 ++++
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/serverSettings/parts/ServerSettingsFiles.tsx b/src/components/pages/serverSettings/parts/ServerSettingsFiles.tsx
index 40e7316f2..98c3eaf7b 100644
--- a/src/components/pages/serverSettings/parts/ServerSettingsFiles.tsx
+++ b/src/components/pages/serverSettings/parts/ServerSettingsFiles.tsx
@@ -1,4 +1,5 @@
 import { Response } from '@/lib/api/response';
+import { bytes } from '@/lib/bytes';
 import {
   Button,
   LoadingOverlay,
@@ -15,8 +16,6 @@ import { IconDeviceFloppy } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { settingsOnSubmit } from '../settingsOnSubmit';
-import { bytes } from '@/lib/bytes';
-import ms from 'ms';
 
 export default function ServerSettingsFiles({
   swr: { data, isLoading },
diff --git a/src/components/pages/urls/UrlCard.tsx b/src/components/pages/urls/UrlCard.tsx
index 96eaa3723..382bdf1e8 100755
--- a/src/components/pages/urls/UrlCard.tsx
+++ b/src/components/pages/urls/UrlCard.tsx
@@ -1,7 +1,7 @@
 import { useConfig } from '@/components/ConfigProvider';
 import RelativeDate from '@/components/RelativeDate';
 import { Url } from '@/lib/db/models/url';
-import { formatRootUrl } from '@/lib/url';
+import { formatRootUrl, trimUrl } from '@/lib/url';
 import { ActionIcon, Anchor, Card, Group, Menu, Stack, Text, Tooltip } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { IconCopy, IconDots, IconPencil, IconTrashFilled } from '@tabler/icons-react';
@@ -79,9 +79,9 @@ export default function UserCard({ url, setSelectedUrl }: { url: Url; setSelecte
             </Text>
             <Text size='xs' c='dimmed'>
               <b>Destination:</b>{' '}
-              <Tooltip label={`Open "${url.destination.trim()}" in a new tab`}>
+              <Tooltip label={`Open "${trimUrl(50, url.destination.trim())}" in a new tab`}>
                 <Anchor href={url.destination} target='_blank' rel='noopener noreferrer'>
-                  {url.destination}
+                  {trimUrl(30, url.destination.trim())}
                 </Anchor>
               </Tooltip>
             </Text>
diff --git a/src/components/pages/urls/views/UrlTableView.tsx b/src/components/pages/urls/views/UrlTableView.tsx
index 1ed9746c3..26542d1bd 100755
--- a/src/components/pages/urls/views/UrlTableView.tsx
+++ b/src/components/pages/urls/views/UrlTableView.tsx
@@ -10,7 +10,7 @@ import { IconCopy, IconPencil, IconTrashFilled } from '@tabler/icons-react';
 import { useConfig } from '@/components/ConfigProvider';
 import { useClipboard } from '@mantine/hooks';
 import { useSettingsStore } from '@/lib/store/settings';
-import { formatRootUrl } from '@/lib/url';
+import { formatRootUrl, trimUrl } from '@/lib/url';
 import EditUrlModal from '../EditUrlModal';
 import { useShallow } from 'zustand/shallow';
 
@@ -218,7 +218,7 @@ export default function UrlTableView() {
               sortable: true,
               render: (url) => (
                 <Anchor href={url.destination} target='_blank' rel='noreferrer'>
-                  {url.destination}
+                  {trimUrl(100, url.destination)}
                 </Anchor>
               ),
               filter: (
diff --git a/src/lib/url.ts b/src/lib/url.ts
index 40b9a33e0..6e7cf4f51 100755
--- a/src/lib/url.ts
+++ b/src/lib/url.ts
@@ -1,3 +1,7 @@
 export function formatRootUrl(route: string, src: string) {
   return `${route === '/' ? '' : route}/${encodeURI(src)}`;
 }
+
+export function trimUrl(length: number, url: string) {
+  return url.length > length ? `${url.slice(0, length)}...` : url;
+}