feat: implement mobile app usability improvements

Mobile Navigation:
- Add MobileNav component with bottom tab bar
- Show mobile nav on small screens, hide desktop sidebar
- Add session count badge to Sessions tab
- Add safe area padding for notched devices

Session Management:
- Redesign SessionCard for mobile with action menu
- Add MobileActionSheet for session actions
- Keep primary action prominent

Forms & Dialogs:
- Stack form fields vertically on mobile
- Ensure 44px minimum touch targets
- Update dialogs for 320px viewport

Responsive Layout:
- Add MobilePageHeader with back button
- Reduce page padding on mobile
- Stack multi-column grids vertically

Touch & Interaction:
- Add active states to interactive elements
- Ensure 8px spacing between touch targets

Complex Pages:
- Update Repo Workspace for mobile
- Update Tool Workshop and Config Profiles

Build: TypeScript check passes, production build succeeds

apps/web/src/components/mobile-page-header.tsx

@@ -0,0 +1,33 @@
+import { useNavigate } from "react-router-dom";
+import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { Icon } from "./icon";
+
+interface MobilePageHeaderProps {
+  title: string;
+  showBack?: boolean;
+  actions?: React.ReactNode;
+}
+
+export function MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps) {
+  const navigate = useNavigate();
+  const isMobile = useMobileViewport();
+
+  if (!isMobile) return null;
+
+  return (
+    <div className="mobile-page-header">
+      {showBack && (
+        <button
+          className="mobile-page-header-back"
+          onClick={() => navigate(-1)}
+          type="button"
+          aria-label="Go back"
+        >
+          <Icon name="arrow-left" size="md" />
+        </button>
+      )}
+      <h1>{title}</h1>
+      {actions && <div className="mobile-page-header-actions">{actions}</div>}
+    </div>
+  );
+}