fix(viewer): correct grid cell overflow + improve graph hub positioning

Grid: Previous CSS used table selectors (th/td) which don't match Fluent
DataGrid's div-based cells. Now targets [role="gridcell"] and inner
content wrapper (> *) with overflow: hidden + textOverflow: ellipsis.
Columns should no longer overlap when resized.

Graph: Source node offset further to upper-left (-100px from bounds).
Hub nodes offset to upper-right (+100px) with 120px vertical spacing
between multiple hubs so they don't stack.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: spaarke-dev

src/client/code-pages/DocumentRelationshipViewer/src/components/DocumentGraph.tsx

@@ -125,7 +125,17 @@ const DocumentGraphInner: React.FC<DocumentGraphProps> = ({
       if (pn.x > maxX) maxX = pn.x;
       if (pn.y < minY) minY = pn.y;
     }
-    const spanX = maxX - minX || 1;
+
+    // Pin source node to upper-left, hub nodes to upper-right.
+    // Use fixed pixel offsets from the bounding box edges so positions
+    // are predictable regardless of force layout randomness.
+    const SOURCE_X = minX - 100;
+    const SOURCE_Y = minY - 100;
+    const HUB_X = maxX + 100;
+    const HUB_START_Y = minY - 100;
+    const HUB_Y_SPACING = 120;
+
+    let hubIndex = 0;
 
     return inputNodes.map(node => {
       const pos = posMap.get(node.id);
@@ -134,16 +144,17 @@ const DocumentGraphInner: React.FC<DocumentGraphProps> = ({
 
       // Pin source node to upper-left corner
       if (node.data.isSource) {
-        x = minX;
-        y = minY;
+        x = SOURCE_X;
+        y = SOURCE_Y;
       }
 
       // Pin parent hub nodes (matter, project, invoice, email) to upper-right
-      // Offset each hub slightly so they don't stack on top of each other
+      // Each hub gets its own vertical slot so they don't overlap
       const hubTypes = ['matter', 'project', 'invoice', 'email'];
       if (node.data.nodeType && hubTypes.includes(node.data.nodeType)) {
-        x = maxX - spanX * 0.05; // slightly inset from right edge
-        y = minY;
+        x = HUB_X;
+        y = HUB_START_Y + hubIndex * HUB_Y_SPACING;
+        hubIndex++;
       }
 
       return {

src/client/code-pages/DocumentRelationshipViewer/src/components/RelationshipGrid.tsx

@@ -70,13 +70,19 @@ const useStyles = makeStyles({
   },
   grid: {
     width: '100%',
-    tableLayout: 'fixed',
-    '& th, & td': {
-      paddingRight: '12px',
+    // Fluent DataGrid resizable columns: cells must clip content to prevent overlap.
+    // Target both the cell container and its inner content wrapper.
+    '& [role="gridcell"], & [role="columnheader"]': {
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      minWidth: 0,
+    },
+    // The inner content div inside each cell needs truncation
+    '& [role="gridcell"] > *, & [role="columnheader"] > *': {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
+      paddingRight: '12px',
     },
   },
   emptyState: {