Fix issues with large paths (#8268)

Author: egbertbouman

src/tribler/ui/src/dialogs/CreateTorrent.tsx

@@ -27,7 +27,7 @@ const filenameColumns: ColumnDef<Filename>[] = [
         accessorKey: "path",
         header: "Filename",
         cell: ({ row }) => {
-            return <span className="line-clamp-1 text-xs">{row.original.path}</span>
+            return <span className="break-all line-clamp-1 text-xs">{row.original.path}</span>
         },
     },
 ]

src/tribler/ui/src/dialogs/SaveAs.tsx

@@ -48,7 +48,7 @@ const getFileColumns = ({ onSelectedFiles }: { onSelectedFiles: (row: Row<FileTr
                                 : <ChevronRight size="16" color="#777"></ChevronRight>}
                         </button>
                     )}
-                    {row.original.name}
+                    <span className="break-all line-clamp-1">{row.original.name}</span>
                 </div>
             )
         }

src/tribler/ui/src/pages/Downloads/Details.tsx

@@ -57,7 +57,7 @@ export default function DownloadDetails({ selectedDownloads }: { selectedDownloa
                         </div>
                         <div className="flex flex-row">
                             <div className="basis-1/4">{t('Name')}</div>
-                            <div className="basis-3/4">{download?.name}</div>
+                            <div className="basis-3/4 break-all line-clamp-1">{download?.name}</div>
                         </div>
                         <div className="flex flex-row">
                             <div className="basis-1/4">{t('Status')}</div>
@@ -77,7 +77,7 @@ export default function DownloadDetails({ selectedDownloads }: { selectedDownloa
                         </div>
                         <div className="flex flex-row">
                             <div className="basis-1/4">{t('Destination')}</div>
-                            <div className="basis-3/4">{download?.destination}</div>
+                            <div className="basis-3/4 break-all line-clamp-1">{download?.destination}</div>
                         </div>
                         <div className="flex flex-row">
                             <div className="basis-1/4">{t('Ratio')}</div>

src/tribler/ui/src/pages/Downloads/Files.tsx

@@ -30,7 +30,7 @@ const getFileColumns = ({ onSelectedFiles }: { onSelectedFiles: (row: Row<FileTr
                                 : <ChevronRight size="16" color="#777"></ChevronRight>}
                         </button>
                     )}
-                    {row.original.name}
+                    <span className="break-all line-clamp-1">{row.original.name}</span>
                 </div>
             )
         }