Add responsive grid layout for mobile/tablet support

Switch from fixed 48-column grid to responsive breakpoints:
- lg (>=1200px): 48 columns, free positioning (unchanged desktop behavior)
- md (>=900px): 24 columns, vertical compaction
- sm (>=600px): 12 columns, vertical compaction
- xs (<600px): 6 columns, vertical compaction

Widgets automatically reflow and stack on smaller screens instead of
being squished. Layout changes are only persisted from the desktop
breakpoint. Drag/resize editing is desktop-only.

Also adds mobile CSS refinements for topbar, tabs, and workspace padding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -32,7 +32,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules",