fix(ShortUrls): add cut off url and add tooltip

ijsKoud · Sep 13, 2023 · 003b29b · 003b29b
1 parent 35437f4
commit 003b29b
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/apps/web/src/app/dashboard/shorturls/_table/columns.tsx b/apps/web/src/app/dashboard/shorturls/_table/columns.tsx
@@ -20,6 +20,7 @@ import { useToast } from "@paperplane/ui/use-toast";
 import { ToastAction } from "@paperplane/ui/toast";
 import { UpdateDialog } from "../UpdateDialog";
 import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@paperplane/ui/tooltip";
 
 export const columns: ColumnDef<ApiUrl>[] = [
 	{
@@ -43,7 +44,23 @@ export const columns: ColumnDef<ApiUrl>[] = [
 	},
 	{
 		accessorKey: "redirect",
-		header: "URL"
+		header: "URL",
+		cell: ({ row }) => {
+			const url = row.getValue("redirect") as string;
+			return (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<p className="overflow-hidden text-ellipsis max-w-xs whitespace-nowrap">{url}</p>
+						</TooltipTrigger>
+
+						<TooltipContent>
+							<p className="max-w-[calc(100vh-32px)]">{url}</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			);
+		}
 	},
 	{
 		accessorKey: "visible",