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>

src/app/globals.css

@@ -1255,6 +1255,62 @@ button:disabled {
     left: 0;
     width: 230px;
   }
+
+  .adminCardGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .topBar {
+    gap: 10px;
+    padding: 8px 12px;
+  }
+
+  .brandLogoFrame {
+    width: 36px;
+    height: 36px;
+  }
+
+  .title {
+    font-size: 15px;
+  }
+
+  .subtitle {
+    font-size: 11px;
+  }
+
+  .profileButton {
+    width: 38px;
+    height: 38px;
+    font-size: 12px;
+  }
+
+  .dashboardWorkspace {
+    padding: 10px;
+  }
+
+  .topEditModeButton {
+    width: 36px;
+    height: 36px;
+  }
+
+  .topBar .topEditModeButton {
+    right: 54px;
+  }
+
+  .dashboardTabsBar {
+    padding: 4px 12px !important;
+  }
+
+  .editToolbar {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+
+  .editToolbar p {
+    font-size: 12px;
+  }
 }
 
 .singleNoteWidget {