fix: data-viewportId name is illegal, renamed to data-viewportid (#5121)

platform/docs/docs/migration-guide/3p10-to-3p11/other.md

@@ -8,6 +8,7 @@ summary: Migration guide for OHIF 3.11 additional changes
 **Key Changes:**
 
 *   **`connectToolsToMeasurementService` parameters:** The `connectToolsToMeasurementService` function from the `@ohif/cornerstone-extensions` now take different arguments.
+*   **`data-viewportId`** The `data-viewportId` naming was not compliant with react and was causing warnings.  Rename references to `data-viewportid`.
 
 **Migration Steps:**
 

platform/docs/docs/platform/hooks/useViewportHover.md

@@ -22,7 +22,7 @@ import { useViewportHover } from '@ohif/extension-cornerstone';
 ```jsx
 function ViewportOverlay({ viewportId }) {
   const { isHovered, isActive } = useViewportHover(viewportId);
-  
+
   return (
     <div className={`overlay ${isHovered ? 'hovered' : ''} ${isActive ? 'active' : ''}`}>
       {isHovered && !isActive && (
@@ -49,9 +49,9 @@ An object containing the following properties:
 
 ## Implementation Details
 
-- The hook uses the DOM to find the viewport element by its `data-viewportId` attribute.
+- The hook uses the DOM to find the viewport element by its `data-viewportid` attribute.
 - It calculates and maintains the viewport's bounding rectangle to efficiently determine if the mouse is within the viewport's bounds.
 - The viewport element's rectangle is updated when the window is resized.
 - Global mouse movement is tracked to determine hover state, rather than relying on traditional mouseenter/mouseleave events.
 - The hook automatically cleans up event listeners when the component unmounts or the viewport ID changes.
-- Active viewport state is derived from the viewport grid state using the `useViewportGrid` hook.
+- Active viewport state is derived from the viewport grid state using the `useViewportGrid` hook.