Fix dealing with large swarm names

src/tribler/ui/src/dialogs/SelectRemotePath.tsx

@@ -72,7 +72,7 @@ export default function SelectRemotePath(props: SelectRemotePathProps & JSX.Intr
                             >
                                 {item.dir && <Folder className="pr-2" />}
                                 {!item.dir && <FileIcon className="pr-2" />}
-                                {item.name}
+                                <span className="break-all line-clamp-1">{item.name}</span>
                             </div>
                         ))}
                     </div>

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

@@ -54,6 +54,9 @@ const downloadColumns: ColumnDef<Download>[] = [
                 </Button>
             )
         },
+        cell: ({ row }) => {
+            return <span className="break-all line-clamp-1">{row.original.name}</span>
+        },
     },
     {
         accessorKey: "size",

src/tribler/ui/src/pages/Popular/index.tsx

@@ -32,7 +32,7 @@ const getColumns = ({ onDownload }: { onDownload: (torrent: Torrent) => void }):
         header: translateHeader('Name'),
         cell: ({ row }) => {
             return <span
-                className="inline-block cursor-pointer hover:underline line-clamp-1"
+                className="cursor-pointer hover:underline break-all line-clamp-1"
                 onClick={() => onDownload(row.original)}>
                 {row.original.name}
             </span>

src/tribler/ui/src/pages/Search/index.tsx

@@ -33,7 +33,7 @@ const getColumns = ({ onDownload }: { onDownload: (torrent: Torrent) => void }):
         header: "Name",
         cell: ({ row }) => {
             return <span
-                className="inline-block cursor-pointer hover:underline line-clamp-1"
+                className="cursor-pointer hover:underline break-all line-clamp-1"
                 onClick={() => onDownload(row.original)}>
                 {row.original.name}
             </span>