Stylistic changes

Author: yoen-velt

apps/react/tables/libraries/AgGrid/marketing-spend-demo-single-comment/components/document/day-view-table-component.tsx

@@ -46,8 +46,8 @@ export const TableComponent: React.FC = () => {
       const commentElement = client.getCommentElement();
       commentElement.disableCommentPinHighlighter();
 
-      // Enable location-based comments for stable attachment across sorting
-      commentElement.enablePriorityCommentLocationId();
+      // Location-based comments are enabled automatically via data-velt-location-id attribute
+      // Velt will prioritize location IDs when the attribute is present on elements
     }
   }, [client]);
 

apps/react/tables/libraries/AgGrid/marketing-spend-demo-single-comment/components/document/grid-components/VeltCellRenderer.tsx

@@ -12,42 +12,14 @@ export const createVeltCellRenderer = (
   const cellKey = getCellFormattingKey(props.data.id, props.colDef.field);
   const formatting = cellFormatting[cellKey] || {};
 
-  // Set ID and location ID on parent AG Grid cell element and add comment tool
+  // Set ID and location ID on parent AG Grid cell element
   React.useEffect(() => {
     if (props.eGridCell) {
       // Set both the element ID and the Velt location ID
       // The location ID is stable and based on data row, not DOM position
       props.eGridCell.id = cellId;
       props.eGridCell.setAttribute('data-velt-location-id', locationId);
-
-      // Check if comment tool already exists
-      let commentTool = props.eGridCell.querySelector('velt-comment-tool');
-      if (!commentTool) {
-        // Create and append comment tool directly to cell
-        commentTool = document.createElement('velt-comment-tool');
-        commentTool.setAttribute('target-comment-element-id', cellId);
-        commentTool.style.cssText = 'position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 1;';
-
-        // Append to cell (outside ag-cell-wrapper)
-        props.eGridCell.appendChild(commentTool);
-      } else {
-        // Update target-comment-element-id when cell is recycled
-        commentTool.setAttribute('target-comment-element-id', cellId);
-      }
     }
-
-    return () => {
-      // Cleanup: remove comment tool and location ID when cell data changes
-      if (props.eGridCell) {
-        const commentTool = props.eGridCell.querySelector('velt-comment-tool');
-        if (commentTool) {
-          commentTool.remove();
-        }
-        // Note: We don't remove the location ID here because AG Grid might
-        // recycle this cell immediately for another row, and we want to avoid
-        // any timing issues where Velt might see the cell without a location ID
-      }
-    };
   }, [cellId, locationId, props.eGridCell]);
 
   const textStyle: React.CSSProperties = {

apps/react/tables/libraries/AgGrid/marketing-spend-demo-single-comment/components/document/styles.ts

@@ -22,7 +22,7 @@ export const styles: { [key: string]: React.CSSProperties } = {
     backgroundColor: '#090909',
     borderRadius: '8px',
     overflow: 'hidden',
-    paddingTop: '36px',
+    paddingTop: '40px',
     paddingBottom: '16px',
   },
   gridWrapper: {

apps/react/tables/libraries/AgGrid/marketing-spend-demo-single-comment/components/velt/ui-customization/VeltCommentToolWf.tsx

@@ -36,7 +36,7 @@ const VeltCommentToolWf = () => {
               transform: 'translate(-50%, -50%)',
               width: '11px',
               height: '11px',
-              border: '0.972px solid white',
+              border: '1.5px solid white',
               borderRadius: '6px 6px 6px 1px',
               boxSizing: 'border-box'
             }}

apps/react/tables/libraries/AgGrid/marketing-spend-demo-single-comment/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@apps/react-tables-AgGrid-marketing-spend-demo-single-comment",
+  "name": "@apps/react-tables-AgGrid-marketing-spend-demo-multiple-comments",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@veltdev/react": "^4.5.6-beta.17",
     "@tabler/icons-react": "^3.35.0",
     "ag-grid-community": "^34.3.0",
     "ag-grid-react": "^34.3.0",