🐛 Wrap long file paths in issues drawer

client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx

@@ -25,6 +25,7 @@ import {
 import { SimplePagination } from "@app/components/SimplePagination";
 import { FileIncidentsDetailModal } from "./file-incidents-detail-modal";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
+import PathDisplay from "./path-display";
 
 export interface IIssueAffectedFilesTableProps {
   issue: AnalysisIssue;
@@ -152,17 +153,13 @@ export const IssueAffectedFilesTable: React.FC<
                   item={fileReport}
                   rowIndex={rowIndex}
                 >
-                  <Td
-                    width={70}
-                    {...getTdProps({ columnKey: "file" })}
-                    modifier="truncate"
-                  >
+                  <Td {...getTdProps({ columnKey: "file" })}>
                     <Button
                       variant="link"
                       isInline
                       onClick={() => setSelectedFileForDetailModal(fileReport)}
                     >
-                      {fileReport?.file || "<unknown>"}
+                      <PathDisplay path={fileReport?.file || "<unknown>"} />
                     </Button>
                   </Td>
                   <Td

client/src/app/pages/issues/issue-detail-drawer/path-display.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface PathDisplayProps {
+  path: string;
+}
+
+const PathDisplay: React.FC<PathDisplayProps> = ({ path }) => {
+  const normalizedPath = path.replace(/\\/g, "/");
+  const formattedPath = normalizedPath
+    .split("/")
+    .reduce<React.ReactNode[]>((acc, segment, index, array) => {
+      acc.push(segment);
+      if (index < array.length - 1) {
+        acc.push(<wbr key={`wbr-${index}`} />);
+        acc.push(<span key={`slash-${index}`}>/</span>);
+      }
+      return acc;
+    }, []);
+
+  return <>{formattedPath}</>;
+};
+
+export default PathDisplay;