Task 19: Add responsive design for mobile and tablet

- DashboardLayout: Hide sidebar on <lg (1024px), responsive padding
- Dashboard grid: Mobile-first (1 col → 2 col at md/768px)
- Activity grid: Mobile-first (1 col → 2 col at md/768px)
- TopBar: Truncate brand text on mobile, hide 'Remote' on <md
- TopBar session: Show time-only on <xs (480px)
- CommandPalette: Full-width on mobile with reduced padding
- CommandPalette footer: Hidden on mobile
- Touch targets: All interactive elements 48px+ on mobile

All breakpoints follow Tailwind responsive prefixes (xs/sm/md/lg/xl).
Quality checks: typecheck ✓, lint ✓ (1 pre-existing warning), build ✓

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

src/index.css

@@ -266,14 +266,25 @@ html {
   background: var(--text-tertiary);
 }
 
-/* Dashboard card grid responsive */
+/* Dashboard card grid responsive — mobile-first */
 .dashboard-grid {
-  grid-template-columns: repeat(2, 1fr);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
 }
 
-@media (max-width: 900px) {
+/* Tablet: 2 columns on wider screens */
+@media (min-width: 768px) {
   .dashboard-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+}
+
+/* Desktop: maintain 2 columns with generous gap */
+@media (min-width: 1024px) {
+  .dashboard-grid {
+    gap: 16px;
   }
 }
 
@@ -325,16 +336,17 @@ html {
   }
 }
 
-/* Activity grid responsive */
+/* Activity grid responsive — mobile-first (used in CareerActivityTile) */
 .activity-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: 10px;
 }
 
-@media (max-width: 900px) {
+/* Tablet and up: 2 columns */
+@media (min-width: 768px) {
   .activity-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 }