fix: long urls get wrapped

diced · Jan 4, 2025 · f16d507 · f16d507
1 parent fa39ac7
commit f16d507
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}