Fix insight grid CSS imports and add typings (#283)

ui/homepage/app/components/insight/layout/WorkspaceGrid.tsx

@@ -4,9 +4,6 @@ import { ReactNode, useEffect, useMemo, useState } from 'react'
 import dynamic from 'next/dynamic'
 import type { Layout, ReactGridLayoutProps } from 'react-grid-layout'
 
-import 'react-grid-layout/css/styles.css'
-import 'react-resizable/css/styles.css'
-
 interface WorkspacePanel {
   id: string
   domId?: string

ui/homepage/app/globals.css

@@ -1,3 +1,6 @@
+@import 'react-grid-layout/css/styles.css';
+@import 'react-resizable/css/styles.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

ui/homepage/package.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@types/node": "24.0.3",
     "@types/react": "19.1.8",
+    "@types/react-grid-layout": "^1.3.5",
     "autoprefixer": "^10.4.16",
     "eslint": "8.57.0",
     "eslint-config-next": "^15.5.3",

ui/homepage/yarn.lock

@@ -555,6 +555,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-grid-layout@npm:^1.3.5":
+  version: 1.3.5
+  resolution: "@types/react-grid-layout@npm:1.3.5"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/abd2a1dda9625c753ff2571a10b69740b2fb9ed1d3141755d54d5814cc12a9701c7c5cd78e8797e945486b441303b82543be71043a32d6a988b57a14237f93c6
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*":
+  version: 19.1.13
+  resolution: "@types/react@npm:19.1.13"
+  dependencies:
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/75e35b54883f5ed07d3b5cb16a4711b6dbb7ec6b74301bcb9bfa697c9d9fff022ec508e1719e7b2c69e2e8b042faac1125be7717b5e5e084f816a2c88e136920
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:19.1.8":
   version: 19.1.8
   resolution: "@types/react@npm:19.1.8"
@@ -1321,6 +1339,7 @@ __metadata:
   dependencies:
     "@types/node": "npm:24.0.3"
     "@types/react": "npm:19.1.8"
+    "@types/react-grid-layout": "npm:^1.3.5"
     autoprefixer: "npm:^10.4.16"
     dompurify: "npm:^3.2.6"
     eslint: "npm:8.57.0"